Flutter基本路由及跳转传值

最新推荐文章于 2025-06-12 08:10:43 发布

原创最新推荐文章于 2025-06-12 08:10:43 发布 · 384 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Flutter #路由

Flutter 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一个使用Flutter实现的简单应用，展示了如何在不同页面间进行导航，并通过参数传递实现页面间的通信。代码示例中，从主页跳转到搜索页，并可以携带标题参数。

在这里插入图片描述

Home.dart


import 'package:flutter/material.dart';
import 'package:untitled1/Pages/SearchPage.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('跳转到搜索页面',style: TextStyle(
              color: Colors.white
            ),),
            onPressed: (){
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context)=>SearchPage(title: '搜索传值',)
                )
              );
            },
            color: Theme.of(context).accentColor,
            textTheme: ButtonTextTheme.primary,//文字主题
          )
        ],
      ),
    );
  }
}

SearchPage.dart

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  String title;
  SearchPage({this.title='搜索'});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //返回按钮
      floatingActionButton: FloatingActionButton(
        child: Text('返回',style: TextStyle(
          color: Colors.white
        ),),
        onPressed: (){
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text(this.title,style: TextStyle(
          color: Colors.amber
        ),),
      ),
      body: Text('搜索页面'),
    );
  }
}