ButtonBar

ButtonBar并不是一個單獨的按鈕控件，而是末端對齊的容器類控件，當在水平方向上沒有足夠空間時候，按鈕將整體垂直排列，而不是換行。基本用法如下：

ButtonBar(
??children: [
????RaisedButton(),
????RaisedButton(),
????RaisedButton(),
????RaisedButton(),
??],
)

ToggleButtons

ToggleButtons組件將多個組件組合在一起，并讓用戶從中選擇。

基礎用法如下：

ToggleButtons(
?//renderBorder: false,//邊框
??color: Colors.green,
??selectedColor: Colors.blue,//選中按鈕的背景顏色
??fillColor: Colors.red,
??isSelected: _selecteds,
??borderRadius: BorderRadius.circular(30),//邊框的圓角半徑
??borderColor: Colors.orange,//邊框的圓角顏色
??borderWidth: 3,//邊框的圓角寬度
??splashColor: Colors.purple,//水波紋顏色
??highlightColor: Colors.yellow,//按下時的高亮顏色
??// disabledColor: Colors.grey[300],禁用狀態下按鈕顏色
??// disabledBorderColor: Colors.blueGrey,禁用狀態下邊框的顏色
??selectedBorderColor: Colors.deepOrange,//選中邊框的顏色
??children: [
????Icon(Icons.local_dining),
????Icon(Icons.local_car_wash),
????Icon(Icons.cake),
??],
??onPressed: (index) {//點擊回調
????setState(() {
??????_selecteds[index] = !_selecteds[index];
????});
??},
),

示例演示

import?'package:flutter/cupertino.dart';
import?'package:flutter/material.dart';

class?ButtonBarDemo?extends?StatefulWidget?{
??@override
??StatecreateState()?{
????return?ButtonBarDemoState();
??}
}

class?ButtonBarDemoState?extends?State<ButtonBarDemo> {
??List _selecteds = [false, false, true];@overrideWidget build(BuildContext context)?{return?Scaffold(
??????appBar: AppBar(
????????title: Text("ButtonBarDemo"),
??????),
??????body: ListView(
????????children: [
??????????ButtonBar(
????????????alignment: MainAxisAlignment.center,
????????????mainAxisSize: MainAxisSize.max,
????????????children: [
??????????????RaisedButton(
????????????????child: Text('添加'),
??????????????),
??????????????RaisedButton(
????????????????child: Text('刪除'),
??????????????),
??????????????RaisedButton(
????????????????child: Text('修改'),
????????????????onPressed: () {},
??????????????),
??????????????RaisedButton(
????????????????color: Colors.blue,
????????????????child: Text('查詢'),
????????????????onPressed: () {},
??????????????)
????????????],
??????????),
??????????ToggleButtons(// renderBorder: false,//邊框
????????????color: Colors.green,
????????????selectedColor: Colors.blue,//選中按鈕的背景顏色
????????????fillColor: Colors.red,
????????????isSelected: _selecteds,
????????????borderRadius: BorderRadius.circular(30),//邊框的圓角半徑
????????????borderColor: Colors.orange,//邊框的圓角顏色
????????????borderWidth: 3,//邊框的圓角寬度
????????????splashColor: Colors.purple,//水波紋顏色
????????????highlightColor: Colors.yellow,//按下時的高亮顏色// disabledColor: Colors.grey[300],禁用狀態下按鈕顏色// disabledBorderColor: Colors.blueGrey,禁用狀態下邊框的顏色
????????????selectedBorderColor: Colors.deepOrange,//選中邊框的顏色
????????????children: [
??????????????Icon(Icons.local_dining),
??????????????Icon(Icons.local_car_wash),
??????????????Icon(Icons.cake),
????????????],
????????????onPressed: (index) {//點擊回調
??????????????setState(() {
????????????????_selecteds[index] = !_selecteds[index];
??????????????});
????????????},
??????????),
????????],
??????),
????);
??}
}

效果：

完

? 碼上加油站

? 一起來加油

長按掃碼關注

點“在看”你懂得

總結

以上是生活随笔為你收集整理的flutter 按钮_【Flutter】ButtonBar和ToggleButtons组合按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。