美文网首页
Flutter（十八）：按钮

Flutter（十八）：按钮

作者: 林ze宏 | 来源:发表于2020-07-22 09:46 被阅读0次

    Flutter 里有很多的 Button 组件很多，常见的按钮组件有：RaisedButton、FlatButton、 IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。

    • RaisedButton ：凸起的按钮，其实就是 Material Design 风格的 Button

    • FlatButton ：扁平化的按钮

    • OutlineButton：线框按钮

    • IconButton ：图标按钮

    • ButtonBar：按钮组

    • FloatingActionButton：浮动按钮

    1 基本按钮

    import 'package:flutter/material.dart';
import 'package:app03/components/Button/Button.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: () {},
            )
          ],
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('普通按钮'),
                  onPressed: () {
                    print("普通按钮");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton(
                  child: Text('颜色按钮'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  onPressed: () {
                    print("有颜色按钮");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton(
                  child: Text('阴影按钮'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  elevation: 20,
                  onPressed: () {
                    print("有阴影按钮");
                  },
                ),
                SizedBox(width: 5),
                RaisedButton.icon(
                    icon: Icon(Icons.search),
                    label: Text('图标按钮'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    // onPressed: null,
                    onPressed: () {
                      print("图标按钮");
                    })
              ],
            ),
            SizedBox(height: 5),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 50,
                  width: 400,
                  child: RaisedButton(
                    child: Text('宽度高度'),
                    color: Colors.blue,
                    textColor: Colors.white,
                    elevation: 20,
                    onPressed: () {
                      print("宽度高度");
                    },
                  ),
                )
              ],
            ),
            SizedBox(height: 5),
            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: 5),
            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("圆角按钮");
                    }),
                Container(
                  height: 80,
                  child: RaisedButton(
                      child: Text('圆形按钮'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      splashColor: Colors.red,
                      shape: CircleBorder(
                        side: BorderSide(color: Colors.white),
                      ),
                      onPressed: () {
                        print("圆形按钮");
                      }),
                ),
                FlatButton(
                  child: Text("按钮"),
                  color: Colors.blue,
                  textColor: Colors.yellow,
                  onPressed: () {
                    print('FlatButton');
                  },
                ),
                SizedBox(width: 10),
                OutlineButton(
                    child: Text("按钮"),
                    //  color: Colors.red,  //没有效果
                    //  textColor: Colors.yellow,
                    onPressed: () {
                      print('FlatButton');
                    })
              ],
            ),
            SizedBox(height: 5),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.all(20),
                    height: 50,
                    child: OutlineButton(child: Text("注册"), onPressed: () {}),
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                ButtonBar(
                  children: <Widget>[
                    RaisedButton(
                      child: Text('登录'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("宽度高度");
                      },
                    ),
                    RaisedButton(
                      child: Text('注册'),
                      color: Colors.blue,
                      textColor: Colors.white,
                      elevation: 20,
                      onPressed: () {
                        print("宽度高度");
                      },
                    ),
                  ],
                )
              ],
            ),
            Button(
              text: "Button1",
              layout: "row",
              color: Colors.orange,
              onPressed: () {
                print('Button 111');
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                ButtonBar(
                  children: <Widget>[
                    Button(
                      text: "Button2",
                      onPressed: () {
                        print('Button 222');
                      },
                    ),
                    new Button(
                      text: "Button3",
                      type: "outline",
                      textColor: Colors.pink,
                      borderSideColor: Colors.pink,
                      height: 60.0,
                      width: 80.0,
                      onPressed: () {
                        print('Button 333');
                      },
                    ),
                  ],
                )
              ],
            ),
          ],
        ));
  }
}

    自定义按钮组件：

    /*
 * Author: lin.zehong 
 * Date: 2020-06-30 22:21:59 
 * Desc: 按钮组件
 */
import 'package:flutter/material.dart';

class Button extends StatelessWidget {
  static const String _layout = "base";
  static const String _type = "raised";
  static const String _text = "按钮";
  static const Color _color = Color.fromRGBO(39, 45, 221, 1.0);

  final String layout; // 分为两种布局，自适应（row） 和 普通（base） 两种。
  final String type; // 分为两种类型，raised：RaisedButton，outline：OutlineButton
  final String text; // 按钮文本
  final double height; // 按钮高度
  final double width; // 按钮宽度Å
  final Color color; // 按钮背景色
  final Color textColor; // 按钮文本颜色
  final Color borderSideColor; // 边框颜色
  final double borderSideWidth; // 边框宽度
  final VoidCallback onPressed; // 点击回调事件

  Button({
    this.type = _type,
    this.layout = _layout,
    this.text = _text,
    this.height,
    this.width,
    this.color = _color,
    this.textColor = Colors.white,
    this.borderSideColor = const Color(0xFF000000),
    this.borderSideWidth = 1.0,
    this.onPressed,
  });

  Widget _getButton() {
    Map<String, MaterialButton> _btn = {
      "raised": RaisedButton(
        child: Text('${this.text}'),
        color: this.color,
        textColor: this.textColor,
        onPressed: this.onPressed,
      ),
      "outline": OutlineButton(
        child: Text('${this.text}'),
        color: this.color,
        textColor: this.textColor,
        borderSide: BorderSide(
          color: this.borderSideColor,
          width: this.borderSideWidth,
        ),
        onPressed: this.onPressed,
      ),
    };
    return _btn[this.type];
  }

  Widget _getLayout() {
    Map _lay = {
      "base": Container(
        height: this.height,
        width: this.width,
        child: this._getButton(),
      ),
      "row": Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Container(
              height: this.height,
              margin: EdgeInsets.all(8),
              child: this._getButton(),
            ),
          )
        ],
      ),
    };
    return _lay[this.layout];
  }

  @override
  Widget build(BuildContext context) {
    return this._getLayout();
  }
}
    效果

    2 FloatingActionButton 浮动按钮

    import 'package:flutter/material.dart';
import 'package:app03/components/Button/Button.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),
          backgroundColor: Colors.orange,
          onPressed: () {
            print('FloatingActionButton');
          },
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ...
          ],
        ));
  }
}
    效果

    3 FloatingActionButton 浮动按钮在 tabs 位置

    通过 floatingActionButtonLocation 定位居中显示，覆盖原来的 tabs 图标。

    Tabs.dart

import 'package:flutter/material.dart';

import 'package:app03/pages/home/HomePage.dart';
import 'package:app03/pages/category/CategoryPage.dart';
import 'package:app03/pages/settings/SettingsPage.dart';

class TabsPage extends StatefulWidget {
  final int index;
  TabsPage({Key key, this.index = 0}) : super(key: key);
  @override
  _TabsPageState createState() => _TabsPageState(this.index);
}

class _TabsPageState extends State<TabsPage> {
  int currentIndex = 0;

  _TabsPageState(index) {
    this.currentIndex = index;
  }

  List listTabs = [
    HomePage(),
    CategoryPage(),
    SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('flutter 标题'),
        centerTitle: true,
        backgroundColor: Colors.pink,
        // leading: IconButton(
        //   icon: Icon(Icons.menu),
        //   onPressed: () {
        //     print('menu');
        //   },
        // ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('search');
            },
          ),
          IconButton(
            icon: Icon(Icons.settings),
            onPressed: () {
              print('settings');
            },
          )
        ],
      ),
      floatingActionButton: Container(
        height: 68,
        width: 68,
        padding: EdgeInsets.all(4),
        margin: EdgeInsets.only(top: 8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(34),
          color: Colors.white,
        ),
        child: FloatingActionButton(
          child: Icon(Icons.add, size: 36, color: Colors.white),
          backgroundColor:
              this.currentIndex == 1 ? Colors.green : Colors.orange,
          onPressed: () {
            setState(() {
              this.currentIndex = 1;
            });
          },
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: this.listTabs[this.currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this.currentIndex,
        iconSize: 30.0,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        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>[
            UserAccountsDrawerHeader(
              accountName: Text('姓名'),
              accountEmail: Text('666553434@qq.com'),
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage(
                  "images/a.jpeg",
                ),
                // NetworkImage("https://www.itying.com/images/flutter/3.png"),
              ),
              // currentAccountPicture: Image.asset(
              //   'images/a.jpeg',
              //   fit: BoxFit.cover,
              //   height: 40,
              //   width: 40,
              // ),
              decoration: BoxDecoration(
                color: Colors.yellow,
                image: DecorationImage(
                  image: NetworkImage(
                    "https://www.itying.com/images/flutter/2.png",
                  ),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            ListTile(
              title: Text('CircleAvatar 内容，跳转到 from 页面。。。'),
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              onTap: () {
                Navigator.of(context).pop(); // 抽屉框消失
                Navigator.pushNamed(context, "/form");
              },
            ),
            Divider(),
            ListTile(
              title: Text('Image 内容。。。'),
              leading: Image.asset(
                'images/a.jpeg',
                fit: BoxFit.cover,
                height: 40,
                width: 40,
              ),
            ),
            Divider(),
            ListTile(
              title: Text('decoration 圆形图片内容。。。'),
              leading: Container(
                height: 40.0,
                width: 40.0,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(20),
                  image: DecorationImage(
                    // "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
                    // image: NetworkImage(
                    //   "https://www.itying.com/images/202004/thumb_img/1067_thumb_G_1587531602352.jpg",
                    // ),
                    image: AssetImage(
                      "images/a.jpeg",
                    ),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Divider(),
            ListTile(
              title: Text(' ClipOval 内容。。。'),
              leading: ClipOval(
                child: Image.asset(
                  "images/a.jpeg",
                  width: 40,
                  height: 40,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Text('右侧侧边栏'),
      ),
    );
  }
}
    效果

    相关文章

      网友评论

          本文标题：Flutter（十八）：按钮

          本文链接：https://www.haomeiwen.com/subject/hjmxqktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|Flutter（十八）：按钮|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！