19 Flutter 中的浮动按钮 FloatingActionButton

Flutter 中的浮动按钮 FloatingActionButton

1.属性

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

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

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

2.如何实现闲鱼上的底部导航栏功能

import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
class Tabs extends StatefulWidget {
  final index;
  Tabs({Key key,this.index=0}) : super(key: key);

  _TabsState createState() => _TabsState(this.index);
}

class _TabsState extends State<Tabs> {

  int _currentIndex;
  _TabsState(index){
    this._currentIndex=index;
  }

  List _pageList=[
    HomePage(),
    HomePage(),
    HomePage(),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter App"),
        ),
        floatingActionButton: Container(
          height: 80,
          width: 80,
          padding: EdgeInsets.all(8),
          margin: EdgeInsets.only(top: 10),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40),
            color: Colors.white,
          ),

          child: FloatingActionButton(
            child: Icon(Icons.add),
            shape:  RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10)),
            onPressed: (){
               setState(() {  //改变状态
                    this._currentIndex=1;
                });

            },
            backgroundColor: this._currentIndex==1?Colors.red:Colors.yellow,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        body: this._pageList[this._currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: this._currentIndex,   //配置对应的索引值选中
          onTap: (int index){
              setState(() {  //改变状态
                  this._currentIndex=index;
              });
          },
          iconSize:36.0,      //icon的大小
          fixedColor:Colors.red,  //选中的颜色  
          type:BottomNavigationBarType.fixed,   //配置底部tabs可以有多个按钮
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首页")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分类")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("设置")
            )
          ],
        ),

        drawer: Drawer(
          child: Column(
            children: <Widget>[

              Row(
                children: <Widget>[
                  Expanded(
                    child: UserAccountsDrawerHeader(
                      accountName:Text("大地老师"),
                      accountEmail: Text("dadi@itying.com"),
                      currentAccountPicture: CircleAvatar(
                        backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),                        
                      ),
                      decoration:BoxDecoration(                        
                        image: DecorationImage(
                          image: NetworkImage("https://www.itying.com/images/flutter/2.png"),
                          fit:BoxFit.cover,
                        )
                        
                      ),
                     otherAccountsPictures: <Widget>[
                       Image.network("https://www.itying.com/images/flutter/4.png"),
                       Image.network("https://www.itying.com/images/flutter/5.png"),
                     ],
                    )
                  )
                ],
              ),
              ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.home)
                ),
                title: Text("我的空间"),
              
              ),
                Divider(),
               ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.people)
                ),
                title: Text("用户中心"),
                onTap: (){
                  Navigator.of(context).pop();  //隐藏侧边栏
                  Navigator.pushNamed(context, '/user');
                },
              ),
              Divider(),
              ListTile(
                leading: CircleAvatar(
                  child: Icon(Icons.settings)
                ),
                title: Text("设置中心"),
              ),
                Divider(),
            ],
          ),


        ),
        endDrawer: Drawer(
          child: Text('右侧侧边栏'),
        ),
      );
  }
}

HomePage

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(       
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
            RaisedButton(
              child: Text('按钮'),
              onPressed: (){
                  Navigator.pushNamed(context, '/buttonPage');
              },
            )
        ]
      ),
    );
  }
}