1. 基本介紹

ButtonBar 是一個放置和排列按鈕的一個組件页屠，與 Row钟些、Column 有一點(diǎn)相似墩朦。有興趣可以了解Flutter 組件之 Row坯认、Column 詳解。

2. 示例代碼

代碼下載地址氓涣。如果對你有幫助的話記得給個關(guān)注牛哺，代碼會根據(jù)我的 Flutter 專題不斷更新。

3. 屬性介紹

4. ButtonBar組件

4.1 容器創(chuàng)建

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 布局

其實(shí) ButtonBar 的布局與Row、Column基本一致蠢古，這里不做詳解奴曙。有興趣可以了解Flutter 組件之 Row、Column 詳解草讶。

可以這樣理解洽糟，當(dāng) ButtonBar.childred 可以在一行排列完成時，可以理解為 Row，反之當(dāng) 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 寬高度

高度可以自定義道偷，寬度只可以設(shè)置最小寬度，當(dāng) ButtonBar.children 的寬度不足最小寬度時烂完，會改變子控件寬度與設(shè)置的最小寬度相等试疙。

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

ButtonBar size.png

4.4 內(nèi)邊距以及間隔距離

為了更好的展示效果，我們先去除掉寬高度設(shè)定抠蚣。

  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. 技術(shù)小結(jié)

• ButtonBar 只是一個容器，需要了解用到的較少履澳。
• 掌握Flutter 組件之 Row嘶窄、Column 詳解，其實(shí)這個看一下就可以了距贷。