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

更新時間：2022年07月28日 14:11:27 作者：派大星?

這篇文章主要為大家詳細(xì)介紹了flutter實現(xiàn)底部不規(guī)則導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了flutter實現(xiàn)底部不規(guī)則導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下

scafford的bottomNavigationBar參數(shù)賦值BottomAppBar可以實現(xiàn)，BottomAppBar比BottomNavigationBar靈活，在body參數(shù)之外準(zhǔn)備好一個fab，使用BottomAppBar的shape屬性設(shè)置BottomAppBar為一個挖了圓形的矩形，設(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是一個挖了圓形的矩形
? ? ? ? child: Row(
? ? ? ? ? mainAxisAlignment: MainAxisAlignment.spaceAround,//首尾的寬度等于中間寬度的一半
? ? ? ? ? mainAxisSize: MainAxisSize.max,//表示占滿整個寬度，如果是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"),
? ? ? ),
? ? );
? }

}

效果：