Flutter开发六、MaterialButton风格按钮以及按钮自适应

目录

MaterialButton

MaterialButton属性

RaisedButton 凸起的按钮

FlatButton扁平化按钮

OutlineButton 带边框按钮

IconButton 

FloatingActionButton

DropdownButton下拉选择框

PopupMenuButton弹出框

定义自适应按钮

---

MaterialButton

import 'package:flutter/material.dart';

MaterialButton buildMaterialButton() {
  return MaterialButton(
    ///按钮的背景
    color: Colors.blue,

    child: Text("按钮"),
    ///点击回调函数
    onPressed: (){
      print("按钮点击");
    },
    ///按钮按下时回调 value = true
    ///按钮抬起时回调 value = false
    ///要先于 onPressed
    onHighlightChanged: (value){
      print("按钮点击 Hight $value");
    },
    ///定义按钮的基色，以及按钮的最小尺寸
    ///ButtonTextTheme.accent 按钮显示的文本 ThemeData.accentColor(MaterialApp组件中的theme属性配制的)
    ///ButtonTextTheme. normal 按钮显示的文本 黑色或者白色 具体取决于ThemeData.brightness Brightness.dark
    ///ButtonTextTheme.primary 按钮的显示的文本 ThemeData.primaryColr
    textTheme: ButtonTextTheme.primary,
    ///配制按钮上文本的颜色
    textColor: Colors.deepOrange,
    ///未设置点击时的背景颜色
    disabledColor:Colors.yellow ,
    ///按钮点击下的颜色
    highlightColor:Colors.deepPurple,
    ///水波方的颜色
    splashColor: Colors.green,
    ///按钮的阴影
    elevation: 10,
    ///按钮按下时的阴影高度
    highlightElevation: 20,
    ///未设置点击时的阴影高度
    disabledElevation: 5.0,
    ///用来设置按钮的边框的样式
    /// Border.all(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid) 四个边框
    /// Border(bottom: BorderSide(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid)) 可以分别设置边框
    /// 用来设置底部边框的
    /// UnderlineInputBorder(borderSide: BorderSide(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid),borderRadius: BorderRadius.circular(10))
    /// 用来设置圆角矩形边框
    ///   RoundedRectangleBorder(side: BorderSide.none,borderRadius: BorderRadius.all(Radius.circular(20)))
    ///   用来设置圆形边框
    ///   CircleBorder(side: BorderSide(width: 2,color:Colors.red )),
    ///   椭圆形边框 StadiumBorder(side: BorderSide(width: 2,color: Colors.red))
    ///   设置 多边形 BeveledRectangleBorder(side: BorderSide(width: 2,color: Colors.red),borderRadius: BorderRadius.all(Radius.circular(20)))
    ///
    shape: Border.all(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid),
    height: 44.0,
    minWidth: 140,
  );
}

  
 

MaterialButton属性

其他几种Button 跟MaterialButton中的属性用法基本一致

属性                         值类型                      说明

• onPressed     VoidCallback ，一般接收一个方法        必填参数，按下按钮时触发的回调，接收一个方法，传null表示按钮禁用，会显示禁用相关样式
• child               Widget            文本控件
• textColor        Color            文本颜色
• color               Color            按钮的颜色
• disabledColor         Color        按钮禁用时的颜色
• disabledTextColor  Color        按钮禁用时的文本颜色
• splashColor            Color        点击按钮时水波纹的颜色
• highlightColor      Color        点击（长按）按钮后按钮的颜色
• elevation              double        阴影的范围，值越大阴影范围越大
• padding                EdgeInsetsGeometry （抽象类）    内边距
  • padding: EdgeInsets.all(20)
  • padding: EdgeInsets.fromLTRB(0,30,20,40) // 左上右下
  • padding: EdgeInsets.only(top: 30) // 单独设置左上右下的间距
• shape                   ShapeBorder（抽象类）    设置按钮的形状
  • BeveledRectangleBorder 带斜角的长方形边框

    shape: BeveledRectangleBorder( // 带斜角的长方形边框
             side: BorderSide(
            color: Colors.white,
          ),
          borderRadius: BorderRadius.all(Radius.circular(10))
          ),

    CircleBorder 圆形边框

         shape: CircleBorder( // 圆形边框
            side: BorderSide(
              color: Colors.white,
            ),
          ),

    RoundedRectangleBorder 圆角矩形

         shape: RoundedRectangleBorder( // 圆角矩形
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),

    StadiumBorder 两端是半圆的边框

     shape: StadiumBorder(),
    

    • 以上常用的两个属性
    • side 用来设置边线（颜色，宽度等）

        const BorderSide({
          this.color = const Color(0xFF000000),
          this.width = 1.0,
          this.style = BorderStyle.solid,
        })

      borderRadius 用来设置圆角

      • all 配置所有方向
      • cricular 环形配置，跟all效果差不多，直接接收double类型的值
      • horizontal 只配置左右方向
      • only 可选左上，右上，左下，右下配置
      • vertical 只配置上下方向
• minWidth       double        最小宽度
• height            double            高度

RaisedButton 凸起的按钮

凸起的按钮，其实就是Android中的Material Design风格的Button ，继承自MaterialButton

MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("测试"),
          ),
          body: Center(
              child: RaisedButton(
            color: Colors.blue,
            textColor: Colors.white,
            child: Text('按钮'),
            onPressed: () {},
          ))),
    );

FlatButton扁平化按钮

扁平化的按钮，继承自MaterialButton

/*扁平按钮*/
class FlatBtn extends StatelessWidget {
  _log() {
    print("点击了扁平按钮");
  }

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: _log,
      child: Text("扁平按钮"),
      color: Colors.blue,
      textColor: Colors.black,
      shape: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.white,
            width: 1,
          ),
          borderRadius: BorderRadius.circular(8)),
    );
  }
}

OutlineButton 带边框按钮

带边框的按钮，继承自MaterialButton,有默认边线且背景透明

/*带边线的按钮*/
class outlineBtn extends StatelessWidget {
  _log() {
    print("点击了边线按钮");
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return OutlineButton(
      onPressed: _log,
      child: Text("边线按钮"),
      textColor: Colors.red,
      splashColor: Colors.green,
      highlightColor: Colors.black,
      shape: BeveledRectangleBorder(
        side: BorderSide(
          color: Colors.red,
          width: 1,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

IconButton 

图标按钮,继承自StatelessWidget

/*图标按钮*/
class IconBtn extends StatelessWidget {
  _log() {
    print("点击了图标按钮");
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.home),
      onPressed: _log,
      color: Colors.blueAccent,
      highlightColor: Colors.red,
    );
  }
}

FloatingActionButton

在侧面浮起来的那种按钮

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

import 'package:flutter/material.dart';

FloatingActionButton buildFloatingActionButton() {

  return FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      print('FloatingActionButton');
    },
    backgroundColor: Colors.yellow,
  );
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton : buildFloatingActionButton(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: Center(),
    );
  }

DropdownButton下拉选择框

DropdownButton({
    Key key,
    @required this.items,       // 下拉选项列表
    this.selectedItemBuilder,   // 选项 item 构造器
    this.value,                 // 选中内容
    this.hint,                  // 启动状态下默认内容
    this.disabledHint,          // 禁用状态下默认内容
    @required this.onChanged,   // 选择 item 回调
    this.elevation = 8,         // 阴影高度
    this.style,                 // 选项列表 item 样式
    this.underline,             // 按钮下划线
    this.icon,                  // 下拉按钮图标
    this.iconDisabledColor,     // 禁用状态下图标颜色
    this.iconEnabledColor,      // 启动时图标颜色
    this.iconSize = 24.0,       // 图标尺寸
    this.isDense = false,       // 是否降低按钮高度
    this.isExpanded = false,    // 是否将下拉列表内容设置水平填充
})

const DropdownMenuItem({
    Key key,
    this.value,             // 对应选中状态内容
    @required this.child,   // 下拉列表 item 内容
})

import 'package:flutter/material.dart';

class DropdownButtonDemoPage extends StatefulWidget {
  @override
  _DropdownButtonDemoPageState createState() => _DropdownButtonDemoPageState();
}

class _DropdownButtonDemoPageState extends State {

  var selectItemValue = '北京';
  List generateItemList() {
    final List items = List();
    final DropdownMenuItem item1 = DropdownMenuItem(
      child: Text('北京'), value: '北京',);
    final DropdownMenuItem item2 = DropdownMenuItem(
      child: Text('上海'), value: '上海',);
    final DropdownMenuItem item3 = DropdownMenuItem(
      child: Text('广州'), value: '广州',);
    final DropdownMenuItem item4 = DropdownMenuItem(
      child: Text('深圳'), value: '深圳',);
    items.add(item1);
    items.add(item2);
    items.add(item3);
    items.add(item4);
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      // 提示文本
      hint: Text('请选择一个城市'),
      // 下拉列表的数据
      items: generateItemList(),
      // 改变事件
      onChanged: (value) {
        setState(() {
          selectItemValue = value;
        });
      },
      // 是否撑满
      isExpanded: true,
      value: selectItemValue,
      // 图标大小
      iconSize: 48,
      // 下拉文本样式
      style: TextStyle(color: Colors.green),
    );
  }
}

PopupMenuButton弹出框

• PopupMenuItem，单个值的弹出菜单项。
• PopupMenuDivider，一个弹出式菜单项，只是一条水平线。
• CheckedPopupMenuItem，带有复选标记的弹出菜单项。
• showMenu，一种在给定位置动态显示弹出菜单的方法。

showMenu(
  context: context, 
  items: [
    //items 子项
    PopupMenuItem(
      value: '1',
      child: Text('Item 1'),
    ),
    PopupMenuItem(
      value: '2',
      child: Text('Item 2'),
    ),
    // 分割线
    PopupMenuDivider(),
    // 带有复选标记的子项
    CheckedPopupMenuItem(
      value: '2',
      child: Text('Item 2'),
      checked:true,
    ),
  ], 
  position: RelativeRect.fill,
);

PopupMenuButton(
  onCanceled: (){
    print('object');
  },
  onSelected: (v){
    print('object   $v');
  },
  itemBuilder: (BuildContext context) {
    List list = List();
    list.add(PopupMenuItem(
          value: '1',
          child: Text('Item 1'),
        ),);
 
    list.add(PopupMenuItem(
          value: '2',
          child: Text('Item 2'),
        ),);
    list.add(PopupMenuDivider(),);
    list.add(CheckedPopupMenuItem(
          value: '3',
          child: Text('Item 3'),
          checked:true,
        ),);
    return list;
  },
),

定义自适应按钮

import 'package:flutter/material.dart';

/*按钮*/
class AutoBtn extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          child: Container(
            height: 50,
            margin: EdgeInsets.all(5),
            child: RaisedButton(
              //背景色
              color: Colors.blue,
              //字体颜色
              textColor: Colors.white,
              //设置按钮阴影
              elevation: 20,
              child: Text("自适应按钮"),
              onPressed: () {
                print("RaisedButton");
              },
            ),
          ),
        )
      ],
    );
  }
}