首页 > 其他 > 详细

自定义底部导航栏-悬浮球

时间:2020-01-09 22:23:08      阅读:142      评论:0      收藏:0      [点我收藏+]

代码1:

import ‘package:flutter/material.dart‘;
import ‘bottomAppBarDemo.dart‘;
void main(List<String> args) {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
 
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘导航栏自定义主题样本‘,
theme: ThemeData(
primarySwatch: Colors.red
)
home: BottomAppBarDemo(),
);
}
}
代码2:
import ‘package:flutter/material.dart‘;
class BottomAppBarDemo extends StatefulWidget {
BottomAppBarDemo({Key key}) : super(key: key);

@override
_BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: (){

},
tooltip: ‘创建‘,
child: Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.lightBlue,
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
 
color: Colors.white,
 
onPressed: (){

},
), IconButton(
icon: Icon(Icons.hotel),
color: Colors.white,
onPressed: (){
 
},
)
],
),
),
);
}
}
总结:
 

//自定义不规则底部导航栏

//不加这句话 悬浮按钮 在右下角,加了这句 悬浮按钮在正中间

      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

//创建悬浮球

//ThemeData(

 primarySwatch: Colors.red //悬浮球内部颜色

 

)

 

 

 

布局:

mainAxisAlignment :MainAxisAlignment.xx

xx ——spaceBetween, 靠两边‘

xx ——spaceEvenly,靠内侧

xx———spaceAround,在中间 

 

自定义底部导航栏-悬浮球

原文:https://www.cnblogs.com/pp-pping/p/12173122.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!