視頻地址:html
https://www.bilibili.com/video/av39709290/?p=4數組
博客地址:app
https://jspang.com/post/flutterDemo.html#toc-7d1less
學習若是使用一個動態的widget代替以前寫的那幾個靜態的widgetjsp
新建文件:each_view.dartide
快捷鍵:stful生成動態的widget函數
定義內部使用的變量:如下劃線開頭的post
String _title;這個title是從上一個頁面傳過來的
咱們在構造函數內初始化一下學習
下面咱們依然return Scaffold腳手架ui
bottom_appBar_demo.dart引入咱們的Each_View.dart
作一個數組,和索引。
用數組來變換咱們頁面裏面的樣式
有了變量之後,咱們須要初始化一下,重寫咱們的初始化狀態方法initState()
點擊中間的按鈕的時候增長響應事件:
這裏用咱們的路由的方式
Navigator.of(context)
of裏面是咱們的上下文
而後用push。push裏面就是咱們的Material路由了,而後裏面是構造器build。這裏也是調用咱們動態的頁面EachView
點擊後就跳轉了咱們的EachView傳遞了的參數New Page
兩邊的兩個按鈕點擊的時候 咱們不是直接跳轉到EachVIew頁面。而是在中間頁面去動態的切換。咱們只須要變化的它的狀態就是它的State就能夠了
而後設置咱們腳手架的body爲內置的_eachView數組內根據索引顯示的widget組件
預覽頁面,若是出錯了 須要從新flutter run一下。看視屏的評論說用大寫R也能夠。
R是大更新,r是小更新
我用大寫的R更新了下 貌似還真能夠!!
import 'package:flutter/material.dart'; import 'bottom_appBar_demo.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.lightBlue,//裏面定義了不少的主題,這裏使用亮藍色 ), home:BottomAppBarDemo() ); } }
import 'package:flutter/material.dart'; import 'each_view.dart'; class BottomAppBarDemo extends StatefulWidget { final Widget child; BottomAppBarDemo({Key key, this.child}) : super(key: key); _BottomAppBarDemoState createState() => _BottomAppBarDemoState(); } class _BottomAppBarDemoState extends State<BottomAppBarDemo> { List<Widget> _eachView; int _index=0; @override void initState(){ _eachView=List(); _eachView ..add(EachView('Home')) ..add(EachView('WJW')); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: _eachView[_index], floatingActionButton: FloatingActionButton( onPressed: (){ Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){ return EachView('New Page'); })); }, tooltip: 'WJW', child: Icon( Icons.add, color: Colors.white, ), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar: BottomAppBar( color: Colors.lightBlue, shape: CircularNotchedRectangle(), child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ IconButton( icon: Icon(Icons.home), color: Colors.white, onPressed: (){ setState(() { _index=0; }); }, ), IconButton( icon: Icon(Icons.alarm_on), color: Colors.white, onPressed: (){ setState(() { _index=1; }); }, ) ], ), ), ); } }
import 'package:flutter/material.dart'; class EachView extends StatefulWidget { String _title; EachView(this._title); @override _EachViewState createState() => _EachViewState(); } class _EachViewState extends State<EachView> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(widget._title),), body: Center(child: Text(widget._title),), ); } }