flutter实现底部不规则导航栏
本文实例为大家分享了flutter实现底部不规则导航栏的具体代码,供大家参考,具体内容如下
scafford的bottomNavigationBar参数赋值BottomAppBar可以实现,BottomAppBar比BottomNavigationBar灵活,在body参数之外准备好一个fab,使用BottomAppBar的shape属性设置BottomAppBar为一个挖了圆形的矩形,设置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放在默认的位置,是放在scafford的floatingactionbar参数的,而不是放在body onPressed: (){ Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){ return new NewPage(); })); }, child: Icon(Icons.add,color: Colors.white,), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//设置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"), ), ); } }
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
Android ListView里控件添加监听方法的实例详解
这篇文章主要介绍了Android ListView里控件添加监听方法的实例详解的相关资料,这里提供实例帮助大家学习理解这部分内容,需要的朋友可以参考下2017-08-08android图库播放幻灯片时按power键灭屏再亮屏显示keyguard
图库在播放幻灯片时,按power键灭屏,然后再亮屏,会发现幻灯片继续在播放,没有显示keyguard,如何在亮屏后显示解锁界面,具体实现方法如下,感兴趣的朋友可以参考下哈2013-06-06Android编程实现在Activity中操作刷新另外一个Activity数据列表的方法
这篇文章主要介绍了Android编程实现在Activity中操作刷新另外一个Activity数据列表的方法,结合具体实例形式分析了2种常用的Activity交互实现技巧,需要的朋友可以参考下2017-06-06Android利用SpannableString实现格式化微博内容
这篇文章主要介绍了Android利用SpannableString实现格式化微博内容的相关资料,文中介绍的非常详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。2017-03-03Android 关于“NetworkOnMainThreadException”问题的原因分析及解决办法
这篇文章主要介绍了Android 关于“NetworkOnMainThreadException”的相关知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧2016-02-02
最新评论