22Flutter中的常见的按钮组件以及自定义按钮组件

喜欢ヅ旅行 2023-08-17 15:59 105阅读 0赞

/*
    Flutter中的常见的按钮组件 以及自定义按钮组件
    一、Flutter中的按钮组件介绍
    Flutter里有很多的Button组件，常见的按钮组件有：RaisedButton/FlatButton/IconButton/
    OutlineButton/ButtonBar/FloatingActionButton等。
    RaisedButton:凸起的按钮，其实就是Material Design风格的Button
    FlatButton:扁平化的按钮
    OutlineButton:线框按钮
    IconButton:图标按钮
    ButtonBar: 按钮组
    FloatingActionButton:浮动按钮
    
    二、Flutter按钮组件中的一些属性：
    onPressed:必填参数，按下按钮时触发的回调，接受一个方法，传null表示按钮禁用，会显示禁用相关样式
    child:文本控件
    textColor:文本颜色
    color:按钮的颜色
    disabledColor:按钮禁用时的颜色
    disabledTextColor:按钮禁用时的文本颜色
    splashColor:点击按钮时水波纹的颜色
    elevation:阴影的范围
    padding:内边距
    shape:设置按钮的形状
    */

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: () {},
                )
              ],
            ),
            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/11512472.html