一堰怨、按鈕
此控件比較簡單帝洪，按鈕的功能可劃分為UI樣式與事件回調(diào)
Material widget庫中提供了多種按鈕Widget如RaisedButton探孝、FlatButton审丘、OutlineButton等，它們都是直接或間接對RawMaterialButton的包裝定制疯暑，所以他們大多數(shù)屬性都和RawMaterialButton一樣训柴。另外，所有Material 庫中的按鈕都有如下相同點：
- 按下時有“水波動畫”妇拯。
- 有一個onPressed屬性來設(shè)置點擊回調(diào)幻馁，按下時會執(zhí)行該回調(diào)
- 如果不提供即不主動的設(shè)置該回調(diào)，則按鈕會處于禁用狀態(tài)越锈，禁用狀態(tài)不響應(yīng)用戶點擊仗嗦。
效果
這里將幾種不同的按鈕一起運(yùn)行，做下對比動圖如下：
五種效果.gif
基本實現(xiàn)
這里對五種按鈕進(jìn)行column居中排列如下
children: <Widget>[
RaisedButton(
// 按鈕文本
child: Text('按鈕RaisedButton'),
// 按鈕點擊事件甘凭，這里只做打印
onPressed: () {
print('onPressed');
}
),
FlatButton(
onPressed: () {
print('FlatButton - 按鈕2');
},
child: Text('按鈕FlatButton')
),
OutlineButton(
child: Text('OutlineButton'),
onPressed: () {
print('OutlineButton');
}),
IconButton(
// 第二篇提到的自帶的iconfont
icon: Icon(Icons.assistant_photo),
onPressed: () {
print('IconButton');
}),
FlatButton(
onPressed: () {
print('FlatButton自定義');
},
child: Text('自定義'),
// 標(biāo)題字體色
textColor: Colors.red,
// 按鈕背景色
color: Colors.cyan,
// 高亮?xí)r背景色稀拐，即按下去的時候
highlightColor: Colors.orange,
// 亮度主題
colorBrightness: Brightness.dark,
// 波紋顏色
splashColor: Colors.purple,
// 外圍圓角為10
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
)
],
二、文本
Text
Text用于顯示簡單樣式文本丹弱，它包含一些控制文本顯示樣式的一些屬性德撬。
Text('這就是最簡單的一個文本')
TextStyle
TextStyle用于指定文本顯示的樣式如顏色铲咨、字體、粗細(xì)砰逻、背景等鸣驱。
// 設(shè)置字體大小為12，并設(shè)置禁止繼承默認(rèn)樣式的字體大小
Text('這就是最簡單的一個文本',style: TextStyle(fontSize: 12,inherit: false),),
TextStyle更多屬性設(shè)置如下：
const TextStyle({
this.inherit = true, // 是否繼承默認(rèn)的樣式即下面的DefaultTextStyle
this.color, // 字體顏色 蝠咆，如果指定了foreground，則此值必須為null北滥。
this.fontSize,// 字體大小
this.fontWeight,// 字體粗細(xì)
// 字體變體：FontStyle.italic 使用斜體 FontStyle.normal 使用直立
this.fontStyle,
// 水平字母之間的空間間隔（邏輯像素為單位）刚操。可以使用負(fù)值來讓字母更接近再芋。
this.letterSpacing,
// 單詞之間添加的空間間隔（邏輯像素為單位）菊霜。可以使用負(fù)值來使單詞更接近济赎。
this.wordSpacing,
/* 對齊文本的水平線:
TextBaseline.alphabetic：文本基線是標(biāo)準(zhǔn)的字母基線
TextBaseline.ideographic：文字基線是表意字基線鉴逞；如果字符本身超出了alphabetic 基線，那么ideograhpic基線位置在字符本身的底部司训。*/
this.textBaseline,
// 文本行與行的高度构捡，作為字體大小的倍數(shù)（取值1~2，如1.2）
this.height,
// 用于選擇區(qū)域特定字形的語言環(huán)境,國際化
this.locale,
// 文本的前景色壳猜，不能與color共同設(shè)置
this.foreground,
// 文本背景色
this.background,
// 背景設(shè)定邊框勾徽、圓角、陰影统扳、形狀喘帚、漸變、背景圖像等
// 詳情可參考 https://blog.csdn.net/chenlove1/article/details/83627831
this.shadows,
/*
繪制文本裝飾:
下劃線（TextDecoration.underline）
上劃線（TextDecoration.overline）
刪除線（TextDecoration.lineThrough）
無（TextDecoration.none）
*/
this.decoration,
this.decorationColor, // 繪制文本裝飾的顏色咒钟。
/* 繪制文本裝飾的樣式:
畫一條段虛線 TextDecorationStyle.dashed
畫一條點虛線 TextDecorationStyle.dotted
畫兩條線 TextDecorationStyle.double
畫一條實線 TextDecorationStyle.solid
畫一條正弦線(波浪線) TextDecorationStyle.wavy */
this.decorationStyle,
this.debugLabel,
String fontFamily, //使用的字體名稱
List<String> fontFamilyFallback,
String package,
})
TextSpan
如果我們需要對一個Text內(nèi)容的不同部分按照不同的樣式顯示吹由，即富文本，這時就可以使用TextSpan朱嘴，它代表文本的一個“片段”倾鲫。
運(yùn)行效果
Text.rich(TextSpan(children: [
TextSpan(
text: 'hello,',
),
TextSpan(
text: 'https://www.baidu.com',
style: TextStyle(
fontSize: 12.0,
color: Colors.blue,
),
)
])),
如上述，我們當(dāng)然也可以在上述鏈接上添加手勢事件腕够，后續(xù)會提到级乍。
DefaultTextStyle
在widget樹中，文本的樣式默認(rèn)是可以被繼承的帚湘，因此玫荣，如果在widget樹的某一個節(jié)點處設(shè)置一個默認(rèn)的文本樣式，那么該節(jié)點的子樹中所有文本都會默認(rèn)使用這個樣式大诸，而DefaultTextStyle正是用于設(shè)置默認(rèn)文本樣式的捅厂。
舉例如下：
DefaultTextStyle(
style: TextStyle(
fontSize: 30,
color: Colors.purple,
),
textAlign: TextAlign.center,
child: Column(
children: <Widget>[
Text('1111'),
Text('2222'),
Text(
'33333',
// 這里不使用默認(rèn) inherit屬性設(shè)置為false
style: TextStyle(fontSize: 12, inherit: false),
),
],
));
