20個Flutter實例視頻教程-第04節: 不規則底部工具欄製做-2

 

視頻地址: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()
    );
  }
}
main.dart

 

 

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; 
                });
              },
            )
          ],
        ),
      ),
    );
  }
}
bottom_appBar_demo.dart

 

 

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),),
    );
  }
}
each_view.dart
相關文章
相關標籤/搜索