Flutter頁面導(dǎo)航

總結(jié)一下flutter內(nèi)部頁面關(guān)于導(dǎo)航的幾種用法:

一. 使用Navigator的push方法,并實現(xiàn)MaterialPageRoute的build方法,打開新頁面:

Navigator.push(context, MaterialPageRoute(builder: (_) {
  return DetailScreen()
}

返回用navigator的pop方法

Navigator.pop(context);

二.用頁面的名字導(dǎo)航到不同頁面:

void main() {
  runApp(MaterialApp(
    title: 'navi base',
    //1.設(shè)置初始頁面的名字.
    initialRoute: '/',
    //2.在runApp里初始化路由數(shù)組routes
    routes: {
      '/': (context) => FirstRoute(),
      '/second': (context) => SecondRoute()
    },
  ));
}

使用navigator的pushNamed方法push到對應(yīng)的頁面

Navigator.pushNamed(context, '/second');

三.導(dǎo)航時帶參數(shù):

1.用navigator的pushNamed方法push頁面,在arguments里加入?yún)?shù):

Navigator.pushNamed(context, ExtractArgumentsScreen.routeName, 
  arguments: ScreenArguments(  'Extract Arguments Screen',  'This message is extracted in the build method.', ), 
);

在導(dǎo)航的目的頁面的build方法里用ModalRoute.of(context)方法獲取需要的參數(shù):

final ScreenArguments args = ModalRoute.of(context).settings.arguments;

2.或者使用onGenerateRoute方法:

MaterialApp(
  onGenerateRoute: (settings) {
      // 從這里拿到數(shù)據(jù)并解析
    if (settings.name == PassArgumentsScreen.routeName) {
      final ScreenArguments args = settings.arguments;
    //解析成功之后再創(chuàng)建目的頁面,傳遞參數(shù)
      return MaterialPageRoute(
        builder: (context) {
          return PassArgumentsScreen(
            title: args.title,
            message: args.message,
          );
        },
      );
    }
  },
);

四.返回的時候帶參數(shù):

第二個頁面返回到第一個頁面的時候如果要帶參數(shù),可以使用async異步方法來實現(xiàn)

//......略.......
onPressed: () {
  //button的點擊事件是一個異步方法:
  _navigateAndDisplaySelection(context);
},
//......略.......
//實現(xiàn)這個異步方法
_navigateAndDisplaySelection(BuildContext context) async {
   final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
   );
}
//獲取到返回值result之后進(jìn)行相應(yīng)的操作:
Scaffold.of(context)
  ..removeCurrentSnackBar()
   ..showSnackBar(SnackBar(content: Text("$result")));
.............

五.用頁面的初始化方法傳遞參數(shù):

class DetailScreen extends StatelessWidget {
  //屬性
  final Todo todo;
  //聲明初始化方法的時候加上參數(shù)this.todo
  DetailScreen({Key key, @required this.todo}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // 生成UI
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

用navigator的push方法,在頁面的初始化方法中傳遞參數(shù):

 onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(todo: todos[index]),//用頁面的初始化方法傳遞參數(shù)
          ),
        );
      },
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容