溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要介紹的是關于Flutter實現底部不規則導航的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧
實現方法：
1、main.dart文件
import 'package:flutter/material.dart';
import 'bootom_appBar.dart';
void main () =>runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'不規則底部導航',
//自定義主題樣本
theme:ThemeData(
primarySwatch:Colors.lightBlue
),
home:BottomAppBarDemo(),
);
}
}
2、bootom_appBar.dart
import 'package:flutter/material.dart';
import 'each_view.dart';
class BottomAppBarDemo extends StatefulWidget {
@override
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
List<Widget> _eachView;
int _index = 0;
@override
void initState() {
_eachView = List();
_eachView ..add(EachView('主頁的頁面'));
_eachView ..add(EachView('副頁的頁面'));
// TODO: implement initState
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('新添加的頁面');
}));
},
tooltip: '添加',
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
//工具欄比NavigationBar靈活
color: Colors.lightBlue,
//與fab融合
//圓形缺口
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;
});
},
)
],
),
),
);
}
}
3、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),),
);
}
}
4、效果展示
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
