實驗一些常用的 Button 功能 （代碼Github地址）
Button 實驗
實驗了 Button 常用的一些功能
- RaisedButton
- FlatButton
- 懸浮按鈕 （FloatingActionButton）
- 寬的懸浮按鈕 （FloatingActionButton.extended）
- 滾動條（Slider）
- 復(fù)選框（Checkbox）
- 選項按鈕 （Radio Buttons）
RaisedButton
用 child 的方式添加文字，用 onPressed 方法監(jiān)聽按鈕行為。
// RaisedButton
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: new RaisedButton(
onPressed: () {print('button click');},
child: new Text("RaisedButton"),
),
),
FlatButton
和 RaisedButton 一樣用 child 的方式添加文字，用 onPressed 方法監(jiān)聽按鈕行為。
FlatButton 本身是透明且沒有突出的，所以設(shè)置了 color 使它更明顯
// FlatButton
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: new FlatButton(
onPressed: () {print('button click');},
child: new Text("FlatButton"),
color: Color(0xFFe16552),
),
),
懸浮按鈕 （FloatingActionButton）
懸浮按鈕，可以通過改變 child 來設(shè)置 button 上顯示文字或者 icon。
同時這里有個要注意的點，就是 material design 建議每個屏幕只有一個 FloatingActionButton，所以如果一定要兩個（比如像我這樣寫demo），就要把這個 heroTag 設(shè)置為 null。
//FloatingActionButton 多個FloatingActionButton的時候會報錯，要加 heroTag: null
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
// FloatingActionButton
new FloatingActionButton(
onPressed: () {print('button click');},
foregroundColor: Colors.white,
backgroundColor: Color(0xFFf19670),
child: new Icon(Icons.add),
heroTag: null,
),
// FloatingActionButton
new FloatingActionButton(
onPressed: () {print('button click');},
foregroundColor: Colors.white,
backgroundColor: Color(0xFFf19670),
child: new Text("文字"),
heroTag: null,
),
],
),
),
寬的懸浮按鈕 （FloatingActionButton.extended）
可以看我上面的動圖，有這個按鈕的效果，感覺還挺棒的哈哈。
// FloatingActionButton.extended
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
child: new FloatingActionButton.extended(
onPressed: () {
print('button click');
},
foregroundColor: Colors.white,
backgroundColor: Colors.amber,
icon: new Icon(Icons.flag,color: Colors.red,),
label: new Text('FloatingActionButton.extended', maxLines: 1),
)
),
滾動條（Slider）
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
child: new Slider(
value: mCurrentValue,
min: 1.0,
max: 10.0,
onChanged: (e) {
setState(() {
//四舍五入的雙精度值
mCurrentValue = e.roundToDouble();
});
}
)
),
復(fù)選框（Checkbox）
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
child: new Checkbox(
value: isChecked,
onChanged: (bool){
setState(() {
isChecked=bool;
});
}, activeColor: Colors.blue,
)
),
選項按鈕 （Radio Buttons）
這里如果把新建的 Radio 的值設(shè)置為 null, 這個 Radio 就是不可選的，會顯示一個灰色的狀態(tài)。
// Radio
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
child: new ButtonBar(//ButtonBar：水平排列按鈕
alignment: MainAxisAlignment.center,
children: <Widget>[
//value和groupValue值一樣的話,則按鈕選中
new Radio(value: 1,
groupValue: groupValue1,
onChanged: (int e) => updateGroupValue(e)),
new Radio(value: 2,
groupValue: groupValue1,
onChanged: (int e) => updateGroupValue(e)),
new Radio(value: 3,
groupValue: groupValue1,
onChanged: (int e) => updateGroupValue(e)),
new Radio(value: 4,
groupValue: groupValue1,
onChanged: (int e) => updateGroupValue(e)),
//value 值為 null 則表示按鈕不可用
new Radio(value: null, groupValue: null, onChanged: null)
],
)
),
遇到的問題
感覺對于控件，各個參數(shù)主要是看官網(wǎng)文檔，然后自己改改, 所以還是記錄一下遇到的問題。
問題一: 當(dāng)多個 FloatingActionButton 的時候程序運行會黑屏
解決方案：把 heroTag 設(shè)置為 null
new FloatingActionButton(
onPressed: () {print('button click');},
foregroundColor: Colors.white,
backgroundColor: Color(0xFFf19670),
child: new Icon(Icons.add),
heroTag: null,
),
看了官網(wǎng)的說明，大意是 material design 建議每個屏幕只有一個 FloatingActionButton，所以如果一定要兩個（比如像我這樣寫demo），就把這個 heroTag 設(shè)置為 null。
官網(wǎng)對于 heroTag 的說明: link
