首页 > 其他 > 详细

Flutter中的浮动按钮FloatingActionButton 及融合底部工具栏

时间:2019-07-23 10:09:59      阅读:1184      评论:0      收藏:0      [点我收藏+]
FloatingActionButton 简称 FAB ,可以实现浮动按钮,也可以实现类似闲鱼 app 的底部凸起导航 。

常用属性

FloatingActionButton的常用属性,同flutter中其他按钮的常用属性大部分相同,但是也有特殊的:

  • child :子视图,一般为 Icon,不推荐使用文字
  • tooltip FAB: 被长按时显示,也是无障碍功能
  • backgroundColor: 背景颜色
  • elevation :未点击的时候的阴影
  • hignlightElevation :点击时阴影值,默认 12.0
  • onPressed :点击事件回调
  • shape :可以定义 FAB 的形状等
  • mini: 是否是 mini 类型默认 false 
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),
       ),
    );
  }
}

FloatingActionButton与BottomAppBar的结合

技术分享图片

不规则的底部导航栏代码如下:


  import ‘package:flutter/material.dart‘;

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

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