Flutter 는 Navigator 를 사용 하여 부분 페이지 를 뛰 어 넘 는 방법

Navigator 구성 요 소 는 사용 빈도 가 높 지 않 지만 일부 장면 에서 매우 적용 된다.예 를 들 어 부분 폼 여러 페이지 의 작성,밑부분 네 비게 이 션 이 계속 존재 하고 모든 tab 는 각각 네 비게 이 션 장면 이 존재 한다.
Navigator 는 경 로 를 관리 하 는 컨트롤 로 통상 적 으로Navigator.of(context)방법 으로 페이지 를 뛰 어 넘 는데,Navigator.of(context)직접 사용 할 수 있 는 이 유 는WidgetsApp에서 이 컨트롤 을 사 용 했 기 때 문 입 니 다.프로그램의 루트 컨트롤 은 보통MaterialApp,MaterialApp포함WidgetsApp이기 때문에 Navigator 의 관련 속성 을 직접 사용 할 수 있 습 니 다.
Navigator 의 사용법 은 매우 간단 합 니 다.다음 과 같 습 니 다.

Navigator(
 initialRoute: '/',
 onGenerateRoute: (RouteSettings settings) {
 WidgetBuilder builder;
 switch (settings.name) {
  case 'home':
  builder = (context) => PageA();
  break;
  case 'user':
  builder = (context) => PageB();
  break;
 }
 return MaterialPageRoute(builder: builder, settings: settings);
 },
)

initialRoute루트 초기 화 를 표시 하고onGenerateRoute루트 설정 에 따라 루트 생 성 을 표시 합 니 다.
그러면 어떤 상황 에서 Navigator 를 사용 해 야 합 니까?부분 페이지 이동 이 필요 한 곳 에 Navigator 를 사용 합 니 다.아래 장면 과 같 습 니 다.
톱 클 라 이언 트 신고 장면
톱스타 클 라 이언 트 는 모든 뉴스 아래 에'포크 번호'가 있 습 니 다.팝 업 관련 정 보 를 클릭 하고 그 중의 부분 을 클릭 하면 현재 작은 창문 에서 신고 페이지 로 이동 합 니 다.효 과 는 다음 과 같 습 니 다.

이 장면 은 네 이 비 게이터 를 사용 한 전형 적 인 장면 으로 제 보 를 클릭 하면 전체 화면 으로 페이지 를 전환 하 는 것 이 아니 라 현재 팝 업 된 페이지 에서 만 전환 하 는 장면 이다.
첫 페이지 코드 는 다음 과 같 습 니 다.

@override
Widget build(BuildContext context) {
 return Center(
 child: Container(
  height: 350,
  width: 300,
  child: Navigator(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settins) {
   WidgetBuilder builder;
   switch (settins.name) {
   case '/':
    builder = (context) => PageC();
    break;
   }
   return MaterialPageRoute(builder: builder);
  },
  ),
 ),
 );
}

Navigator의 초기 화 경 로 는 PageC 페이지 이 고 PageC 페이지 코드 는 다음 과 같 습 니 다.

class PageC extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Center(
  child: Card(
  child: Column(
   children: <Widget>[
   _buildItem(Icons.clear, '    ', '      '),
   Divider(),
   _buildItem(Icons.access_alarm, '  ', '    ，       ',
    showArrow: true, onPress: () {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
    return PageD();
    }));
   }),
   Divider(),
   _buildItem(Icons.perm_identity, '    ：      ', ''),
   Divider(),
   _buildItem(Icons.account_circle, '  ', '    、    '),
   ],
  ),
  ),
 );
 }

 _buildItem(IconData iconData, String title, String content,
  {bool showArrow = false, Function onPress}) {
 return Row(
  children: <Widget>[
  Icon(iconData),
  SizedBox(
   width: 20,
  ),
  Expanded(
   child: Column(
   crossAxisAlignment: CrossAxisAlignment.start,
   children: <Widget>[
    Text(
    title,
    style: TextStyle(fontSize: 18),
    ),
    Text(
    content,
    style: TextStyle(
     color: Colors.black.withOpacity(.5), fontSize: 14),
    )
   ],
   ),
  ),
  !showArrow
   ? Container()
   : IconButton(
    icon: Icon(Icons.arrow_forward_ios),
    iconSize: 16,
    onPressed: onPress,
    ),
  ],
 );
 }
}

PageC 페이지 를 PageD 페이지 로 이동 합 니 다.PageD 페이지 코드 는 다음 과 같 습 니 다.

class PageD extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Container(
  height: 200,
  width: 250,
  color: Colors.grey.withOpacity(.5),
  child: Column(
  children: <Widget>[
   Row(
   children: <Widget>[
    IconButton(
    icon: Icon(Icons.arrow_back_ios),
    onPressed: () {
     Navigator.of(context).pop();
    },
    ),
    Text('  '),
    SizedBox(
    width: 30,
    ),
    Text('  '),
   ],
   ),
  ],
  ),
 );
 }
}

최종 적 으로 국부 점프 효 과 를 실 현 했 고 중간 구역 에서 만 변 했 고 다른 구역 은 변 하지 않 았 다.
탭 내 점프
또 하나의 전형 적 인 응용 장면 은 Tab 에서 점프 하 는데 효 과 는 다음 과 같다.

아래쪽 내 비게 이 션 은 항상 존재 합 니 다.모든 tab 에는 자신의 내 비게 이 션 이 있 습 니 다.
첫 페이지 코드 는 다음 과 같 습 니 다.

class TabMain extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => _TabMainState();
}

class _TabMainState extends State<TabMain> {
 int _currentIndex = 0;

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  body: IndexedStack(
  index: _currentIndex,
  children: <Widget>[
   TabNavigator(0),
   TabNavigator(1),
   TabNavigator(2),
  ],
  ),
  bottomNavigationBar: BottomNavigationBar(
  onTap: (int index) {
   setState(() {
   _currentIndex = index;
   });
  },
  currentIndex: _currentIndex,
  items: <BottomNavigationBarItem>[
   BottomNavigationBarItem(title: Text('  '), icon: Icon(Icons.home)),
   BottomNavigationBarItem(title: Text('  '), icon: Icon(Icons.book)),
   BottomNavigationBarItem(
    title: Text('  '), icon: Icon(Icons.perm_identity)),
  ],
  ),
 );
 }
}

홈 페이지 는 3 개의 tab 및 전환 효 과 를 정의 합 니 다.
정의 TabNavigator:

class TabNavigator extends StatelessWidget {
 TabNavigator(this.index);

 final int index;

 @override
 Widget build(BuildContext context) {
 return Navigator(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settins) {
  WidgetBuilder builder;
  switch (settins.name) {
   case '/':
   builder = (context) => ListPage(index);
   break;
  }
  return MaterialPageRoute(builder: builder);
  },
 );
 }
}

목록 페이지,이 페이지 는 일반적으로 List 페이지 입 니 다.그 중 하 나 를 클릭 하여 자세 한 페이지 로 이동 합 니 다.여 기 는 간편 하기 위해 점프 버튼 만 놓 았 습 니 다.

class ListPage extends StatelessWidget {
 ListPage(this.index);

 final int index;

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(),
  body: Center(
  child: RaisedButton(
   child: Text('$index'),
   onPressed: () {
   Navigator.of(context).push(MaterialPageRoute(builder: (context) {
    return DetailPage();
   }));
   },
  ),
  ),
 );
 }
}

상세 페이지

class DetailPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(),
  body: Center(
  child: Text('DetailPage'),
  ),
 );
 }
}

Navigator 컨트롤 은 특별히 자주 사용 되 지 않 지만 일부 장면 에 서 는 매우 적합 하 다.
총결산
여기 서 Flutter 가 Navigator 를 사용 하여 부분 점프 페이지 를 진행 하 는 것 에 관 한 글 을 소개 합 니 다.더 많은 관련 Flutter 가 Navigator 를 사용 하여 부분 점프 페이지 를 진행 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!