flutter學習--不規則底部導航欄製作

不規則底部導航欄

自定義主題樣本

Flutter支持自定義主題,如果使用自定義主題,設置的內容項是非常多的,Flutter貼心的爲給我們準備了主題樣本。

theme: ThemeData(
  primarySwatch: Colors.lightBlue,
),

會了這個知識後,我們就可以先把我們的主入口文件編寫一下了,具體代碼如下:

import 'package:flutter/material.dart';
import 'bottom_appBar_demo.dart';

void main()=>runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter Demo',
theme: ThemeData(
  primarySwatch: Colors.lightBlue,
),
      home:BottomAppBarDemo(),
    );
  }
}

這時候bottom_appBar_demo.dart這個文件還沒有,也找不到,這個文件是我們的主要文件,我們的主要業務邏輯會寫在這個文件裏。

因爲沒有所以你寫完之後會報錯,那接下來我們就來編寫這個文件。

floatingActionButton Widget

floatingActionButton工作中我們通常簡稱它爲“FAB”,也許只是我們公司這樣稱呼,從字面理解可以看出,它是“可交互的浮動按鈕”,其實在Flutter默認生成的代碼中就有這傢伙,只是我們沒有正式的接觸。

一般來說,它是一個圓形,中間放着圖標,會優先顯示在其他Widget的前面。

下面我們來看看它的常用屬性:

  • onPressed :點擊相應事件,最常用的一個屬性。
  • tooltip:長按顯示的提示文字,因爲一般只放一個圖標在上面,防止用戶不知道,當我們點擊長按時就會出現一段文字性解釋。非常友好,不妨礙整體佈局。
  • child :放置子元素,一般放置Icon Widget。

我們來看一下floatingActionButton的主要代碼:

floatingActionButton: FloatingActionButton(
    onPressed: (){
      Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
        return EachView('New Page');
      }));
    },
    tooltip: 'Increment',
    child: Icon(
      Icons.add,
      color: Colors.white,
    ),
  ),

寫完這些代碼已經有了一個懸浮的按鈕,但這個懸浮按鈕還沒有和低欄進行融合,這時候需要一個屬性。

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

BottomAppBar Widget

BottomAppBar 是 底部工具欄的意思,這個要比BottomNavigationBar widget靈活很多,可以放置文字和圖標,當然也可以放置容器。

BottomAppBar的常用屬性:

  • color:這個不用多說,底部工具欄的顏色。
  • shape:設置底欄的形狀,一般使用這個都是爲了和floatingActionButton融合,所以使用的值都是CircularNotchedRectangle(),有缺口的圓形矩形。
  • child : 裏邊可以放置大部分Widget,讓我們隨心所欲的設計底欄。
import 'package:flutter/material.dart';

class BottomAppBarDemo extends StatefulWidget {
  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {

  @override
  Widget build(BuildContext context) {
     return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: (){
          
          },
          tooltip: 'Increment',
          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:(){
                
               }
             ),
             IconButton(
               icon:Icon(Icons.airport_shuttle),
               color:Colors.white,
               onPressed:(){
                 
               }
             ),
           ],
         ),
       )
        ,
     );
  }
}

StatefulWidget子頁面的製作

新建一個each_view.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)),
    );
  }
}

代碼中設置了一個內部的_title變量,這個變量是從主頁面傳遞過來的,然後根據傳遞過來的具體值顯示在APP的標題欄和屏幕中間。

按鈕交互效果的製作

import 'package:flutter/material.dart';
import 'each_view.dart';

class BottomAppBarDemo extends StatefulWidget {
  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
  List<Widget> _eachView;  //創建視圖數組
  int _index = 0;          //數組索引,通過改變索引值改變視圖

  @override
  void initState() {
      // TODO: implement initState
      super.initState();
      _eachView = List();
      _eachView..add(EachView('Home'))..add(EachView('Me'));
    }

  @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: 'Increment',
          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.airport_shuttle),
               color:Colors.white,
               onPressed:(){
                 setState(() {
                    _index=1;             
                 });
               }
             ),
           ],
         ),
       )
        ,
     );
  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章