フラッターエントリ（3） - 誘導経路+の底

* StatefulWidget

あなたは、データ・ページを変更したい場合は、カスタムコンポーネントがStatelessWidget動的に変更されたページのデータを継承することはできません前に、StatefulWidgetを使用することが必要です

// 自定义有状态组件
クラスホームページ延びStatefulWidget { 
  ホームページ（{キーキー}）：スーパー（キー：キー）

  @Override 
  _HomePageState createState（） => _HomePageState（）; 
} 

クラス _HomePageStateは延び州<ホームページ> {
   INT countNum = 0 。
  @Override 
  ウィジェットのビルド（BuildContextコンテキスト）{ 
    リターンセンター（
      子：カラム（
        子供： <ウィジェット> [ 
          SizedBox（高さ： 100 ）、
          チップ（ 
            ラベル：テキスト（ '$ {} this.countNum' ）、
          ）、 
          SizedBox（高さ： 20である）、
          RaisedButton（
            子：テキスト（ 'ボタン' ）、
            onPressed：（）{ 
              SETSTATE（（）{ 
                // 状態のみコンポーネントだけで
                この .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

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

フラッターエントリ（3） - 誘導経路+の底

おすすめ