23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮：

冷不防 2023-08-17 15:59 113阅读 0赞

/*
    一、Flutter FloatingActionButton介绍
    FloatingActionButton简称FAB,可以实现浮动按钮，也可以实现类型闲鱼app的底部凸起导航。
    child:子视图，一般为Icon,不推荐使用文字。
    tooltip:FAB被长按时显示，也是无障碍功能
    backgroundColor:背景颜色
    elevation:未点击的时候的阴影
    hignlightElevation:点击时阴影值，默认12.0
    onPressed:点击事件回调
    shape:可以定义FAB的形状等。
    mini:是否是mini类型默认false
    */

Tabs.dart【设置闲鱼APP凸起按钮方法】

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 = 1}) : super(key: key);
      _TabsState createState() => _TabsState(this.index);
    }
    
    class _TabsState extends State<Tabs> {
      int _currentIndex = 0;
      _TabsState(index) {
        this._currentIndex = index;
      }
      List _pageList = [HomePage(), CategoryPage(), SettingPage()];
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Flutter Demo'),
          ),
          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),
              onPressed: () {
                // print("floatingActionButton tabs");
                setState(() {
                  this._currentIndex=1;
                });
              },
              backgroundColor: this._currentIndex==1?Colors.red:Colors.yellow,
            ),
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          bottomNavigationBar: BottomNavigationBar(
              currentIndex: this._currentIndex,
              onTap: (int index) {
                // print(index);
                setState(() {
                  this._currentIndex = index;
                });
              },
              iconSize: 36.0,
              type: BottomNavigationBarType.fixed,
              fixedColor: Colors.red,
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.category), title: Text('分类')),
                BottomNavigationBarItem(
                    icon: Icon(Icons.settings), title: Text('设置')),
              ]),
          body: this._pageList[this._currentIndex],
          drawer: Drawer(
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    // Expanded(
                    //   child: DrawerHeader(
                    //     child: Text('你好Flutter'),
                    //     decoration: BoxDecoration(
                    //       // color: Colors.yellow
                    //       image: DecorationImage(
                    //         image: NetworkImage('https://www.itying.com/images/flutter/2.png'),
                    //         fit:BoxFit.cover
                    //       ),
                    //     ),
                    //   )
                    // )
    
                    Expanded(
                      child: UserAccountsDrawerHeader(
                        accountName: Text('老师你好'),
                        accountEmail: Text('gztt@163.com'),
                        currentAccountPicture: CircleAvatar(
                          backgroundImage: NetworkImage(
                              'https://www.itying.com/images/flutter/3.png'),
                        ),
                        decoration: BoxDecoration(
                          // color: Colors.yellow
                          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/5.png'),
                          Image.network(
                              'https://www.itying.com/images/flutter/4.png')
                        ],
                      ),
                    )
                  ],
                ),
                ListTile(
                    leading: CircleAvatar(
                      child: Icon(Icons.home),
                    ),
                    title: Text('我的空间')),
                Divider(),
                ListTile(
                    leading: CircleAvatar(
                      child: Icon(Icons.home),
                    ),
                    title: Text('用户中心'),
                    onTap: () {
                      Navigator.of(context).pop();
                      Navigator.pushNamed(context, '/user');
                    }),
                Divider(),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.home),
                  ),
                  title: Text('用户中心'),
                )
              ],
            ),
          ),
          endDrawer: Drawer(
            child: Text('右侧侧边栏'),
          ),
        );
      }
    }

Button.dart

import 'package:flutter/material.dart';
    
    class ButtonDemoPage extends StatelessWidget {
      const ButtonDemoPage({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('按钮演示页面'),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.settings),
                  onPressed: () {},
                )
              ],
            ),
            floatingActionButton: FloatingActionButton(
              child: Icon(Icons.add,color: Colors.black,size: 40),
              onPressed: (){
                print("floatingActionButton");
              },
              backgroundColor: Colors.yellow,
    
            ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    RaisedButton(
                      child: Text('普通'),
                      onPressed: () {
                        print('普通按钮');
                      },
                    ),
                    SizedBox(width: 5),
                    RaisedButton.icon(
                      icon: Icon(Icons.search),
                      label: Text('图标'),
                      onPressed: null,
                    ),
                    SizedBox(width: 10),
                    RaisedButton(
                      child: Text('有颜色'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      onPressed: () {
                        print('有颜色按钮');
                      },
                    ),
                    SizedBox(width: 10),
                    RaisedButton(
                        child: Text('有阴影'),
                        color: Colors.blue,
                        textColor: Colors.white,
                        elevation: 10,
                        onPressed: () {
                          print('有阴影按钮');
                        }),
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: 50,
                      width: 400,
                      child: RaisedButton(
                        child: Text('宽度高度'),
                        color: Colors.blue,
                        textColor: Colors.white,
                        elevation: 20,
                        onPressed: () {},
                      ),
                    )
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                        child: Container(
                      height: 60,
                      margin: EdgeInsets.all(10),
                      child: RaisedButton(
                        child: Text('自适应按钮'),
                        color: Colors.blue,
                        textColor: Colors.white,
                        elevation: 20,
                        onPressed: () {
                          print('自适应按钮');
                        },
                      ),
                    ))
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                      child: Text('圆角按钮'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      onPressed: () {
                        print('圆角按钮');
                      },
                    ),
                    RaisedButton(
                      child: Text('圆形按钮'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      splashColor: Colors.grey,
                      shape: CircleBorder(side: BorderSide(color: Colors.white)),
                      onPressed: () {
                        print('圆形按钮');
                      },
                    )
                  ],
                ),
                FlatButton(
                  //扁平化按钮：
                  child: Text('扁平化的按钮'),
                  color: Colors.blue,
                  textColor: Colors.yellow,
                  onPressed: () {},
                ),
                OutlineButton(
                  child: Text('线框按钮'),
                  onPressed: () {
                    print('OutlineButton');
                  },
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.all(20),
                        height: 50,
                        child: OutlineButton(
                          child: Text('注册'),
                          onPressed: () {},
                        ),
                      ),
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    ButtonBar(
                      //按钮组
                      children: <Widget>[
                        RaisedButton(
                          child: Text('登录'),
                          color: Colors.blue,
                          textColor: Colors.white,
                          onPressed: () {},
                        ),
                        RaisedButton(
                          child: Text('注册'),
                          color: Colors.blue,
                          textColor: Colors.white,
                          onPressed: () {},
                        ),
                      ],
                    )
                  ],
                ),
                MyButton(
                  text: "自定义按钮",
                  height: 60.0,
                  width: 100.0,
                  pressed: () {
                    print("自定义按钮");
                  },
                )
                
              ],
            ));
      }
    }
    
    //自定义按钮组件：
    class MyButton extends StatelessWidget {
      final text;
      final pressed;
      final double width;
      final double height;
      const MyButton(
          {
         this.text = '', this.pressed = null, this.width = 80, this.height = 30});
      @override
      Widget build(BuildContext context) {
        return Container(
          height: this.height,
          width: this.width,
          child: RaisedButton(
            child: Text(this.text),
            onPressed: this.pressed,
          ),
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11512814.html