前言
Flutter 作為Google出品的一個(gè)新興的跨平臺(tái)移動(dòng)客戶端UI開(kāi)發(fā)框架抑诸，正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，包括阿里的咸魚(yú)爹殊、騰訊的微信等蜕乡。
示意圖
今天，我主要講解Flutter中按鈕方面的Widget梗夸，包括：
- RaisedButton：凸起层玲、有陰影 - 繼承自MaterialButton
- FlatButton：扁平、無(wú)陰影 - 繼承自MaterialButton
- OutlineButton：帶邊框 - 繼承自MaterialButton
- IconButton：帶圖標(biāo) - 繼承自StatelessWidget
希望你們會(huì)喜歡反症。
示意圖
1. RaisedButton
- 核心屬性
const RaisedButton({
Key key,
@required VoidCallback onPressed, // 按下按鈕的回調(diào)
Widget child, // 子控件辛块，一般是傳入一個(gè)TextWidget
Color textColor, // 文本顏色
Color disabledTextColor, /// 禁用時(shí)文本的顏色
Color color, // 按鈕顏色
Color disabledColor,// 禁用時(shí)的按鈕顏色
Color highlightColor, // 點(diǎn)擊 / 長(zhǎng)按的顏色
Color splashColor, // 點(diǎn)擊時(shí)水波紋顏色
double elevation, // 陰影范圍，值大 - 范圍越大
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding, // 內(nèi)邊距铅碍，接受的類(lèi)型是：EdgeInsetsGeometry類(lèi)型
ShapeBorder shape, // 按鈕形狀润绵，主要分為：BeveledRectangleBorder（帶斜角的長(zhǎng)方形邊框）、CircleBorder（圓形邊框）胞谈、RoundedRectangleBorder（圓角矩形）尘盼、StadiumBorder（兩端是半圓的邊框）
Clip clipBehavior = Clip.none,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
})
- 具體使用
/**
* 導(dǎo)入庫(kù)
**/
import 'package:flutter/material.dart';// Material UI組件庫(kù)
void main() => runApp(MyApp());
// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象，用來(lái)定義當(dāng)前應(yīng)用打開(kāi)的時(shí)候烦绳，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: new RaisedButton(
color: Colors.red, // 按鈕顏色
splashColor: Colors.black, // 水波紋顏色
highlightColor: Colors.green, // 長(zhǎng)按樣式
textColor: Colors.white, // 文本顏色
child: Text("RaiseButton"), // 按鈕字樣
padding: EdgeInsets.fromLTRB(0,5,6,7),// 設(shè)置四個(gè)方向的內(nèi)邊距
shape: RoundedRectangleBorder( // 設(shè)置按鈕形狀為圓角矩形
borderRadius: BorderRadius.all(Radius.circular(10)),
),
onPressed: _pressCallBack, // 點(diǎn)擊事件
),
);
}
_pressCallBack() {
print("點(diǎn)擊了按鈕");
}
}
- 效果圖
2. FlatButton
- 定義
扁平卿捎、無(wú)陰影 - 繼承自MaterialButton
- 具體使用
與RaisedButton的屬性設(shè)置十分類(lèi)似，此處僅作展示
import 'package:flutter/material.dart';// Material UI組件庫(kù)
void main() => runApp(MyApp());
// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象径密，用來(lái)定義當(dāng)前應(yīng)用打開(kāi)的時(shí)候午阵，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: new FlatButton(
color: Colors.red, // 按鈕顏色
splashColor: Colors.black, // 水波紋顏色
highlightColor: Colors.green, // 長(zhǎng)按樣式
textColor: Colors.white, // 文本顏色
child: Text("FlatButton"), // 按鈕字樣
padding: EdgeInsets.fromLTRB(0,5,6,7),// 設(shè)置四個(gè)方向的內(nèi)邊距
shape: RoundedRectangleBorder( // 設(shè)置按鈕形狀為圓角矩形
borderRadius: BorderRadius.all(Radius.circular(10)),
),
onPressed: _pressCallBack, // 點(diǎn)擊事件
),
);
}
_pressCallBack() {
print("點(diǎn)擊了按鈕");
}
}
3. OutlineButton
- 定義
帶邊框 - 繼承自MaterialButton
- 具體使用
與RaisedButton的屬性設(shè)置十分類(lèi)似，此處僅作展示
import 'package:flutter/material.dart';// Material UI組件庫(kù)
void main() => runApp(MyApp());
// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象享扔，用來(lái)定義當(dāng)前應(yīng)用打開(kāi)的時(shí)候底桂，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: new OutlineButton(
borderSide:new BorderSide(color: Colors.red), // 自定義邊框顏色&樣式
splashColor: Colors.black, // 水波紋顏色
highlightColor: Colors.green, // 長(zhǎng)按樣式
textColor: Colors.red, // 文本顏色
child: Text("OutlineButton"), // 按鈕字樣
padding: EdgeInsets.fromLTRB(0,5,6,7),// 設(shè)置四個(gè)方向的內(nèi)邊距
shape: RoundedRectangleBorder( // 設(shè)置按鈕形狀為圓角矩形
borderRadius: BorderRadius.all(Radius.circular(10)),
),
onPressed: _pressCallBack, // 點(diǎn)擊事件
),
);
}
_pressCallBack() {
print("點(diǎn)擊了按鈕");
}
}
4. IconButton
- 定義
帶圖標(biāo) - 繼承自StatelessWidget
- 具體使用
與RaisedButton的屬性設(shè)置十分類(lèi)似，此處僅作展示
import 'package:flutter/material.dart';// Material UI組件庫(kù)
void main() => runApp(MyApp());
// 無(wú)狀態(tài)控件顯示
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 主界面入口返回的組件 = MaterialApp
return MaterialApp(
title: 'Widget_Demo', //標(biāo)題
theme: ThemeData(primarySwatch: Colors.blue), //主題色
home: MyHomePage(), // 返回一個(gè)Widget對(duì)象惧眠，用來(lái)定義當(dāng)前應(yīng)用打開(kāi)的時(shí)候籽懦，所顯示的界面
);
}
}
// 返回的Widget對(duì)象
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
//設(shè)置appbar
appBar: new AppBar(
title: new Text('Flutter Demo'),
),
//主體
body: new IconButton(
icon:Icon(Icons.add),
color: Colors.blue, // 按鈕顏色
splashColor: Colors.black, // 水波紋顏色
highlightColor: Colors.green, // 長(zhǎng)按樣式
onPressed: _pressCallBack, // 點(diǎn)擊事件
),
);
}
_pressCallBack() {
print("點(diǎn)擊了按鈕");
}
}
5. 總結(jié)
- 本文主要講解了Flutter中按鈕組件方面的Widget，包括RaisedButton锉试、FlatButton猫十、OutlineButton览濒、IconButton
- 接下來(lái)推出的文章，我將繼續(xù)講解Flutter的相關(guān)知識(shí)拖云，包括更多的Widget用法贷笛、實(shí)例應(yīng)用等，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客
請(qǐng)點(diǎn)贊宙项！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫(xiě)作的最大動(dòng)力乏苦！
相關(guān)文章閱讀
Android開(kāi)發(fā)：最全面、最易懂的Android屏幕適配解決方案
Android開(kāi)發(fā)：史上最全的Android消息推送解決方案
Android開(kāi)發(fā)：最全面尤筐、最易懂的Webview詳解
Android開(kāi)發(fā)：JSON簡(jiǎn)介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關(guān)注Carson_Ho的簡(jiǎn)書(shū)汇荐！
不定期分享關(guān)于安卓開(kāi)發(fā)的干貨，追求短盆繁、平掀淘、快，但卻不缺深度油昂。
