FloatingActionButton的常用属性,同flutter中其他按钮的常用属性大部分相同,但是也有特殊的:
import ‘package:flutter/material.dart‘; void main(){ runApp(MyApp());} class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home:HomeContent(), ); } } class HomeContent extends StatelessWidget{ int _counter = 0; //声明计数器 void _incrementCounter(){ setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:Text("flutter demo") ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text(‘点一次增加一个数字‘), Text( ‘$_counter‘, style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: ‘Increment‘, child: Icon(Icons.add), ), ); } }
不规则的底部导航栏代码如下:
class MyApp extends StatefulWidget { @override MyAppState createState() => MyAppState(); } class MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return Scaffold( body: BottomAppBarDemo(), //不规则的底部导航 ); } } class BottomAppBarDemo extends StatefulWidget { _BottomAppBarDemoState createState() => _BottomAppBarDemoState(); } class _BottomAppBarDemoState extends State<BottomAppBarDemo> { List<Widget> _eachView; int _index = 0; @override void initState() { _eachView = List(); _eachView..add(EachView(‘Home‘))..add(EachView(‘User‘)); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( floatingActionButton: FloatingActionButton( //浮动交互按钮 onPressed: (){ Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) { return EachView(‘New Page‘); } )); }, tooltip: ‘新建页‘, //长按提示 backgroundColor:Colors.red, //背景颜色 child:Icon(Icons.add,color: Colors.white,) ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //融合底部工具栏 bottomNavigationBar: BottomAppBar( //底部工具栏 color: Colors.red, 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.airplay), color: Colors.white, onPressed: (){ setState(() { _index = 1; }); }, ), ], ), ), body:_eachView[_index], ); } } 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), ), ); } }
如果还是跳上次的子页,代码如下:
void initState() { _eachView = List(); _eachView // ..add(EachView(‘Home‘)) // ..add(EachView(‘User‘)); ..add(Contacts()) ..add(Personal()); super.initState(); }
还要记得头部要import的子页
Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏
原文:https://www.cnblogs.com/joe235/p/11229815.html