zoukankan      html  css  js  c++  java
  • Flutter入门(三)-底部导航+路由

    * 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

    欢迎关注我的微信公众号:安卓圈

  • 相关阅读:
    Linux虚拟内存管理(glibc)
    linux kernel内存回收机制
    Linux的Cache Memory(缓存内存)机制
    imx6用文件io操作gpio
    imx6中iomux IO复用
    start with git
    Linux进程的虚拟内存区域划分
    关于函数返回值为指针类型的分析
    对LCD接口的认识
    LCD屏背光驱动调试心得---血的教训
  • 原文地址:https://www.cnblogs.com/anni-qianqian/p/12082977.html
Copyright © 2011-2022 走看看