Flutter又提供了一套Material風(fēng)格（Android默認(rèn)的視覺(jué)風(fēng)格）和一套Cupertino風(fēng)格（iOS視覺(jué)風(fēng)格）的widget庫(kù)。要使用基礎(chǔ)widget庫(kù)，需要先導(dǎo)入下面三者之一 。我們絕大多數(shù)情況下使用material。
注意： 不懂的屬性設(shè)置一下代碼跑一下就知道了。
import 'package:flutter/widgets.dart'; ## 基礎(chǔ)控件風(fēng)格
import 'package:flutter/material.dart'; ## android風(fēng)格
import 'package:flutter/cupertino.dart'; ### iOS風(fēng)格
文本Text
Text("Hello world",
textAlign: TextAlign.center, ## 對(duì)齊方式
maxLines: 1, ### 幾行
overflow: TextOverflow.ellipsis, ## 溢出方式
textScaleFactor: 1.5, ### 字體。默認(rèn)值將為1.0。 快速設(shè)置不設(shè)置fontSize的話
style: TextStyle(
color: Colors.blue,
fontSize: 18.0,
height: 1.2, ## 行高== fontSize*height
fontFamily: "Courier", ## 字體
background: new Paint()..color=Colors.yellow,
decoration:TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
),
);
文本TextSpan
TextSpan(
text: "https://flutterchina.club",
style: TextStyle(
color: Colors.blue
),
recognizer: _tapRecognizer , ## 手勢(shì)，如點(diǎn)擊
child()
),
富文本的使用
Text.rich(TextSpan(
children: [
TextSpan(
text: "Home: "
),
TextSpan(
text: "https://flutterchina.club",
style: TextStyle(
color: Colors.blue
),
recognizer: _tapRecognizer
),
]
))
默認(rèn)文本樣式DefaultTextStyle
DefaultTextStyle(
//1.設(shè)置文本默認(rèn)樣式
style: TextStyle(
color:Colors.red,
fontSize: 20.0,
),
textAlign: TextAlign.start,
child: Column( ### 所有的子節(jié)點(diǎn)都是上面的設(shè)置
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("hello world"),
Text("I am Jack"),
Text("I am Jack",
style: TextStyle(
inherit: false, //2.不繼承默認(rèn)樣式
color: Colors.grey
),
),
],
),
);
字體的設(shè)置
在pubspec.yaml(空格嚴(yán)格)中引入字體文件
flutter:
fonts:
- family: Raleway
fonts:
- asset: assets/fonts/Raleway-Regular.ttf
- asset: assets/fonts/Raleway-Medium.ttf
weight: 500
- asset: assets/fonts/Raleway-SemiBold.ttf
weight: 600
- family: AbrilFatface
fonts:
- asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
使用字體
想使用第三方包內(nèi)的引入目錄變更就可以
fonts:
- asset: packages/my_package/fonts/Raleway-Medium.ttf
// 聲明文本樣式
const textStyle = const TextStyle(
fontFamily: 'Raleway',
);
// 使用文本樣式
var buttonText = const Text(
"Use the font for this text",
style: textStyle,
);
懸浮按鈕RaisedButton
RaisedButton(
child: Text("normal"),
onPressed: () => {},
);
扁平按鈕FlatButton
FlatButton(
child: Text("normal"),
onPressed: () => {},
)
差行按鈕OutlineButton
OutlineButton(
child: Text("normal"),
onPressed: () => {},
)
圖標(biāo)按鈕IconButton
IconButton(
child: Text("normal"),
onPressed: () => {},
)
自定義按鈕
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () => {},
)
圖片框Image
本地圖片先引入： 在pubspec.yaml中的flutter部分添加如下內(nèi)容：
assets:
- images/avatar.png
Image(
image: AssetImage("images/avatar.png"), ##本地引入
image: NetworkImage( ## 網(wǎng)絡(luò)引入二選一
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
height: 100, //圖片高度
color:Colors.blue , //圖片的混合色值
colorBlendMode: BlendMode.difference , //混合模式
fit: BoxFit,//縮放模式
alignment : Alignment.center, //對(duì)齊方式
repeat : ImageRepeat.noRepeat, //重復(fù)方式
);
fit 方式
矢量圖icon
體積?。嚎梢詼p小安裝包大小。
矢量的：iconfont都是矢量圖標(biāo)，放大不會(huì)影響其清晰度。
可以應(yīng)用文本樣式：可以像文本一樣改變字體圖標(biāo)的顏色、大小對(duì)齊等。
可以通過(guò)TextSpan和文本混用。
Material中有一套
String icons = "";
// accessible:  or 0xE914 or E914
icons += "\uE914";
// error:  or 0xE000 or E000
icons += " \uE000";
// fingerprint:  or 0xE90D or E90D
icons += " \uE90D";
Text(icons,
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green
),
)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessible,color: Colors.green,),
Icon(Icons.error,color: Colors.green,),
Icon(Icons.fingerprint,color: Colors.green,),
],
)
自定義icon圖標(biāo)
阿里矢量圖庫(kù)
將圖片轉(zhuǎn)換成tiff格式
在字體中引入
fonts:
- family: myIcon #指定一個(gè)字體名
fonts:
- asset: fonts/iconfont.ttf
自定義和一個(gè)類(lèi)
class MyIcons{
// book 圖標(biāo)
static const IconData book = const IconData(
0xe614,
fontFamily: 'myIcon',
matchTextDirection: true
);
// 微信圖標(biāo)
static const IconData wechat = const IconData(
0xec7d,
fontFamily: 'myIcon',
matchTextDirection: true
);
}
使用
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(MyIcons.book,color: Colors.purple,),
Icon(MyIcons.wechat,color: Colors.green,),
],
)
單選開(kāi)關(guān)和復(fù)選框
注意 ： 本身不保存狀態(tài)和移動(dòng)端的一樣 ，所以要在繼承State類(lèi)中管理狀態(tài)，也就是要自己自定義管理私有屬性.
dart語(yǔ)言下劃線就是私有屬性。
重要：Switch和Checkbox屬性比較簡(jiǎn)單，讀者可以查看API文檔（command/ctrl + 左鍵），它們都有一個(gè)activeColor屬性，用于設(shè)置激活態(tài)的顏色。至于大小，到目前為止，Checkbox的大小是固定的，無(wú)法自定義，而Switch只能定義寬度，高度也是固定的。值得一提的是Checkbox有一個(gè)屬性tristate ，表示是否為三態(tài)，其默認(rèn)值為false ，這時(shí)Checkbox有兩種狀態(tài)即“選中”和“不選中”，對(duì)應(yīng)的value值為true和false ；如果其值為true時(shí)，value的值會(huì)增加一個(gè)狀態(tài)null，讀者可以自行了解。
class SwitchAndCheckBoxTestRoute extends StatefulWidget {
@override
_SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
}
class _SwitchAndCheckBoxTestRouteState extends State<SwitchAndCheckBoxTestRoute> {
bool _switchSelected=true; //維護(hù)單選開(kāi)關(guān)狀態(tài)
bool _checkboxSelected=true;//維護(hù)復(fù)選框狀態(tài)
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Switch(
value: _switchSelected,//當(dāng)前狀態(tài)
onChanged:(value){
//重新構(gòu)建頁(yè)面
setState(() {
_switchSelected=value;
});
},
),
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, //選中時(shí)的顏色
onChanged:(value){
setState(() {
_checkboxSelected=value;
});
} ,
)
],
);
}
}
下一篇比較重要的控件
