flutter如何實(shí)現(xiàn)底部不規(guī)則導(dǎo)航欄

這篇文章主要介紹了flutter如何實(shí)現(xiàn)底部不規(guī)則導(dǎo)航欄的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇flutter如何實(shí)現(xiàn)底部不規(guī)則導(dǎo)航欄文章都會(huì)有所收獲，下面我們一起來看看吧。

scafford的bottomNavigationBar參數(shù)賦值BottomAppBar可以實(shí)現(xiàn)，BottomAppBar比BottomNavigationBar靈活，在body參數(shù)之外準(zhǔn)備好一個(gè)fab，使用BottomAppBar的shape屬性設(shè)置BottomAppBar為一個(gè)挖了圓形的矩形，設(shè)置fab的位置便可；

main：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/EachView.dart';
import 'package:flutter_app/NewPage.dart';

void main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new MaterialApp(
      theme: ThemeData(
        primarySwatch:Colors.lightBlue//fab的顏色
      ),
      home: MyNavigationBar(),
    );
  }

}
class  MyNavigationBar extends StatefulWidget{

  @override
  MyNavigationBarState createState() {
    // TODO: implement createState
    // throw UnimplementedError();
    return new MyNavigationBarState();
  }

}
class MyNavigationBarState extends State<MyNavigationBar>{
  List<Widget> _list;
  int _index=0;

  @override
  void initState() {
    _list=[];
    _list..add(EachView(title: "0",))..add(EachView(title: "1",));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new Scaffold(

      floatingActionButton: FloatingActionButton(//注意：如果想要fab放在默認(rèn)的位置，是放在scafford的floatingactionbar參數(shù)的，而不是放在body
        onPressed: (){
          Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
            return new NewPage();
          }));
        },
        child: Icon(Icons.add,color: Colors.white,),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//設(shè)置fab的位置
      body: _list[_index],
      bottomNavigationBar: BottomAppBar(
        color: Colors.amber,
        shape: CircularNotchedRectangle(),//讓bottomAppBar是一個(gè)挖了圓形的矩形
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,//首尾的寬度等于中間寬度的一半
          mainAxisSize: MainAxisSize.max,//表示占滿整個(gè)寬度，如果是min表示包裹子控件
          children: [
            IconButton(
              icon: Icon(Icons.home,color: Colors.lightBlue,),
              onPressed: (){
                setState(() {
                  _index=0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.photo,color: Colors.lightBlue,),
              onPressed: (){
                setState(() {
                  _index=1;
                });
              },
            ),

          ],
        ),
      ),
    );
  }

}

EachView：

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

class EachView extends StatelessWidget{
  final String title;

  const EachView({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new Scaffold(
      body: Center(
        child: Text("$title"),
      ),
    );
  }

}

NewPage：

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

class NewPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    // throw UnimplementedError();
    return new Scaffold(
      body: Center(
        child: Text("NewPage"),
      ),
    );
  }

}

效果：

關(guān)于“flutter如何實(shí)現(xiàn)底部不規(guī)則導(dǎo)航欄”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“flutter如何實(shí)現(xiàn)底部不規(guī)則導(dǎo)航欄”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。