简介

ButtonBar “末端对齐的按钮容器”

横排的Button布局

基本用法

根据当前 ButtonTheme 中的填充水平放置 button

子 button 在布置行与 MainAxisAlignment.end;
当 Directionality为TextDirection.ltr 时，按钮栏的子项右对齐，最后一个子项成为最右边的子项;
当 Directionality TextDirection.rtl 时，子项被左对齐，最后一个子项成为最左边的子项;

实例演示

import 'package:flutter/material.dart';

/*
* ButtonBar 默认的实例
* */
class ButtonBarFullDefault extends StatefulWidget {
  const ButtonBarFullDefault() : super();

  @override
  State<StatefulWidget> createState() => _ButtonBarFullDefault();
}

/*
* ButtonBar 默认的实例,有状态
* */
class _ButtonBarFullDefault extends State {
  @override
  Widget build(BuildContext context) {
    return ButtonBar(
      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
    );
  }
}

/*
* ButtonBar 默认的实例,无状态
* */
class ButtonBarLessDefault extends StatelessWidget {
  final widget;
  final parent;

  const ButtonBarLessDefault([this.widget, this.parent])
      : super();

  @override
  Widget build(BuildContext context) {
    return Container(
        margin:  EdgeInsets.symmetric(vertical: 0.0),
        height: 100.0,
        child:  Scrollbar(child:ListView(
            scrollDirection: Axis.horizontal, // 水平listView
            children: <Widget>[
              ButtonBar(
                alignment: MainAxisAlignment.spaceAround, //布局方向，默认MainAxisAlignment.end
                mainAxisSize: MainAxisSize.max, //主轴大小，默认MainAxisSize.max
                children: <Widget>[ // Button集合
                  RaisedButton(child: Text('ButtonBar1'),color: Colors.red,onPressed: ()=>{},),
                  RaisedButton(child: Text('ButtonBar2'),color: Colors.red,onPressed: ()=>{},),
                  RaisedButton(child: Text('ButtonBar3'),color: Colors.red,onPressed: ()=>{},),
                ],
              ),
              ButtonBar(
                alignment: MainAxisAlignment.end, //布局方向，默认MainAxisAlignment.end
                mainAxisSize: MainAxisSize.min, //主轴大小，默认MainAxisSize.max
                children: <Widget>[ // Button集合
                  RaisedButton(child: Text('ButtonBar1'),color: Colors.yellow,onPressed: ()=>{},),
                  RaisedButton(child: Text('ButtonBar2'),color: Colors.yellow,onPressed: ()=>{},),
                  RaisedButton(child: Text('ButtonBar3'),color: Colors.yellow,onPressed: ()=>{},),
                ],
              )
            ]
        )
    ));
  }
}