flutter 底部导航栏使用BottomAppBar组件和floatingActionButton浮动按钮组件实现中间嵌入式圆形导航
底部导航栏使用BottomAppBar组件底部导航栏除了可以使用BottomNavigationBar固定样式外,还可以自定义导航栏中的按钮BottomAppBar(color:,底部导航栏颜色shape: CircularNotchedRectangle(),有缺口的圆形矩阵,用来放置浮动按钮child...
·
底部导航栏使用BottomAppBar组件
底部导航栏除了可以使用BottomNavigationBar固定样式外,还可以自定义导航栏中的按钮
BottomAppBar(
color:, 底部导航栏颜色
shape: CircularNotchedRectangle(), 有缺口的圆形矩阵,用来放置浮动按钮
child:导航栏内容
)
效果图:
代码示例:
import "package:flutter/material.dart";
import "drag.dart";
import 'page/1.dart';
import 'page/2.dart';
import 'page/3.dart';
void main()
{
runApp(App());
}
class App extends StatelessWidget {
const App({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return App2();
}
}
class App2 extends StatefulWidget {
App2({Key key}) : super(key: key);
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App2> {
List _page=[Home3(),Home2(),Home4()];
int index=0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar:AppBar(
title: Text('小案例'),
),
body:_page[index] ,
floatingActionButton: FloatingActionButton(
onPressed: (){},
tooltip: 'js',
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//不适用固定格式的导航栏
bottomNavigationBar:BottomAppBar(
color: Colors.lightBlue,
//有缺口的圆形矩阵,用来放置浮动按钮
shape: CircularNotchedRectangle(),
//导航栏内容
child: Row(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
//设置内容
children: <Widget>[
IconButton(
icon:Icon(Icons.home),
color: Colors.white,
onPressed: (){},
),
IconButton(
icon:Icon(Icons.category),
color: Colors.white,
onPressed: (){},
),
],),
)
),
//去掉右上角的debug贴纸
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue
),
);
}
}
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
Color dragColor=Colors.orange;
@override
Widget build(BuildContext context) {
return Container(
child: Text('a'),
);
}
}
更多推荐
所有评论(0)