Flutter入门（25）：Flutter 组件之 ButtonBar 详解

1. 基本介绍

ButtonBar 是一个放置和排列按钮的一个组件，与 Row、Column 有一点相似。有兴趣可以了解Flutter 组件之 Row、Column 详解。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. 属性介绍

ButtonBar属性	介绍
alignment	MainAxisAlignment，主轴布局方式
mainAxisSize	主轴方向占据空间的值，默认为max
buttonTextTheme	Button的Text主题
buttonMinWidth	Button最小宽度
buttonHeight	Button高度
buttonPadding	Button内边距
buttonAlignedDropdown	下拉菜单是否与button宽度匹配
layoutBehavior	默认为 ButtonBarLayoutBehavior.padded，也可以设置为约束 ButtonBarLayoutBehavior.constrained
overflowDirection	Button排列顺序，默认为 VerticalDirection.down
overflowButtonSpacing	Button间隔距离
children	<Widget>[] 子控件集合，建议设置为Button集合

4. ButtonBar组件

4.1 容器创建

import 'package:flutter/material.dart';

class FMButtonBarVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("ButtonBar"),
      ),
      body: _buttonBar(),
    );
  }

  ButtonBar _buttonBar(){
    return ButtonBar(
      alignment: MainAxisAlignment.spaceBetween,
      children: [
        _raisedButton(),
        _flatButton(),
        Container(color: Colors.green,width: 100, height: 100,),
      ],
    );
  }

  RaisedButton _raisedButton(){
    return RaisedButton(
      color: Colors.blue,
      textColor: Colors.white,
      child: Text("RaisedButton"),
    );
  }

  FlatButton _flatButton(){
    return FlatButton(
      onPressed: (){},
      child: Text("FlatButton"),
      textColor: Colors.white,
      color: Colors.red,
    );
  }
}

ButtonBar.png

4.2 Flex 布局

其实 ButtonBar 的布局与Row、Column基本一致，这里不做详解。有兴趣可以了解Flutter 组件之 Row、Column 详解。

可以这样理解，当 ButtonBar.childred 可以在一行排列完成时，可以理解为 Row，反之当 ButtonBar.children 无法在一行里排列下时，他会纵向排列，也就变成了 Column。

PS：ButtonBar 只是一个容器而已，为子控件 button 提供一些共有主题之类的，如上方示例，第三个子控件加了一个 Container 也可以正常使用。

  ButtonBar _buttonBar(){
    return ButtonBar(
      alignment: MainAxisAlignment.spaceBetween,
      children: [
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
      ],
    );
  }

ButtonBar Row.png

  ButtonBar _buttonBar(){
    return ButtonBar(
      // overflowDirection: VerticalDirection.down,
      // overflowButtonSpacing: 30,
      // buttonPadding: EdgeInsets.all(30),
      // buttonHeight: 100,
      alignment: MainAxisAlignment.spaceBetween,
      children: [
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
      ],
    );
  }

ButtonBar Column.png

4.3 宽高度

高度可以自定义，宽度只可以设置最小宽度，当 ButtonBar.children 的宽度不足最小宽度时，会改变子控件宽度与设置的最小宽度相等。

  ButtonBar _buttonBar(){
    return ButtonBar(
      buttonHeight: 100,
      buttonMinWidth: 200,
      alignment: MainAxisAlignment.spaceBetween,
      children: [
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
      ],
    );
  }

ButtonBar size.png

4.4 内边距以及间隔距离

为了更好的展示效果，我们先去除掉宽高度设定。

  ButtonBar _buttonBar(){
    return ButtonBar(
      alignment: MainAxisAlignment.start,
      children: [
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
      ],
    );
  }

ButtonBar padding none.png

  ButtonBar _buttonBar(){
    return ButtonBar(
      overflowButtonSpacing: 20,
      alignment: MainAxisAlignment.start,
      children: [
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
      ],
    );
  }

ButtonBar space.png

  ButtonBar _buttonBar(){
    return ButtonBar(
      overflowButtonSpacing: 20,
      buttonPadding: EdgeInsets.all(20),
      alignment: MainAxisAlignment.start,
      children: [
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
        _raisedButton(),
        _flatButton(),
      ],
    );
  }

ButtonBar space and padding.png

5. 技术小结

ButtonBar 只是一个容器，需要了解用到的较少。
掌握Flutter 组件之 Row、Column 详解，其实这个看一下就可以了。