Flutter入门(三)-底部导航+路由
2023-09-14 09:00:41 时间
* StatefulWidget
如果想改变页面中的数据就要用到StatefulWidget,之前自定义组件继承的StatelessWidget是不能动态修改页面数据的
//自定义有状态组件
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int countNum = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
SizedBox(height: 100),
Chip(
label: Text('${this.countNum}'),
),
SizedBox(height: 20),
RaisedButton(
child: Text('按钮'),
onPressed: () {
setState(() {
//只有有状态组件里才有
this.countNum++;
});
},
)
],
),
);
}
}
效果图
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List list = new List();
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Column(
children: this.list.map((value) {
return ListTile(
title: Text(value),
);
}).toList(),
),
SizedBox(height: 20),
RaisedButton(
child: Text("按钮"),
onPressed: () {
setState(() {
list.add('新增数据');
});
},
)
],
);
}
}
效果图
* bottomNavigationBar(底部导航按钮)+Navigator(路由/替换路由+传值)
命名路由比普通路由更适合统一管理
代码结构
贴一下很重要的路由管理类
import 'package:flutter/material.dart'; import '../pages/Tabs.dart'; import '../pages/Form.dart'; import '../pages/Search.dart'; import '../pages/Product.dart'; import '../pages/ProductInfo.dart'; import '../pages/user/Login.dart'; import '../pages/user/RegisterFirst.dart'; import '../pages/user/RegisterSecond.dart'; import '../pages/user/RegisterThird.dart'; //配置路由 final routes = { '/': (context, {arguments}) => Tabs(), '/form': (context) => FormPage(), '/product': (context) => ProductPage(), '/productInfo': (context, {arguments}) => ProductInfoPage(arguments: arguments), '/search': (context, {arguments}) => SearchPage(arguments: arguments), '/login': (context) => LoginPage(), '/registerFirst': (context) => RegisterFirstPage(), '/registerSecond': (context) => RegisterSecondPage(), '/registerThird': (context) => RegisterThirdPage(), }; //固定写法 //参考https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments var onGenerateRoutes = (RouteSettings settings) { //统一处理 final String name = settings.name; final Function pageContentBuilder = routes[name]; if (pageContentBuilder != null) { if (settings.arguments != null) { final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context, arguments: settings.arguments)); return route; } else { final Route route = MaterialPageRoute(builder: (context) => pageContentBuilder(context)); return route; } } };
效果图
代码地址:https://github.com/king1039/FlutterRoute/tree/master/lib
欢迎关注我的微信公众号:安卓圈
相关文章
- react 路由权限守卫[通俗易懂]
- [NetWork] 路由聚合与CIDR
- RabbitMQ 学习(六)---- 路由订阅模型
- 中国电信修改光猫路由模式为桥接模式怎么改_打10000改电信光猫桥接模式
- 什么是路由模式通配符?
- VRRP虚拟路由冗余协议原理解析,附实验配置!
- 【错误记录】Flutter 报错 ( Because xx depends on flutter_driver any from sdk which depends on args 1.6.0 )
- 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )
- 【Android 组件化】路由组件 ( 运行时获取 注解处理器 生成的路由表 )
- MySQL分库分表后路由策略设计详情
- Linux中网卡路由设置实现网络连通性(linux网卡路由设置)
- Linux下构建联网之路——路由实践(路由linux)
- Linux 局域网路由新手指南:第 1 部分
- 你所不了解的静态路由特点及配置
- Redis路由选择优选择业务服务器之间的连接(redis路由选择)