Flutter又提供了一套Material风格(Android默认的视觉风格)和一套Cupertino风格(iOS视觉风格)的widget库。要使用基础widget库,需要先导入下面三者之一 。我们绝大多数情况下使用material。
注意: 不懂的属性设置一下代码跑一下就知道了。
import 'package:flutter/widgets.dart'; ## 基础控件风格
import 'package:flutter/material.dart'; ## android风格
import 'package:flutter/cupertino.dart'; ### iOS风格
文本Text
Text("Hello world",
textAlign: TextAlign.center, ## 对齐方式
maxLines: 1, ### 几行
overflow: TextOverflow.ellipsis, ## 溢出方式
textScaleFactor: 1.5, ### 字体。默认值将为1.0。 快速设置不设置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 , ## 手势,如点击
child()
),
富文本的使用
Text.rich(TextSpan(
children: [
TextSpan(
text: "Home: "
),
TextSpan(
text: "https://flutterchina.club",
style: TextStyle(
color: Colors.blue
),
recognizer: _tapRecognizer
),
]
))
默认文本样式DefaultTextStyle
DefaultTextStyle(
//1.设置文本默认样式
style: TextStyle(
color:Colors.red,
fontSize: 20.0,
),
textAlign: TextAlign.start,
child: Column( ### 所有的子节点都是上面的设置
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("hello world"),
Text("I am Jack"),
Text("I am Jack",
style: TextStyle(
inherit: false, //2.不继承默认样式
color: Colors.grey
),
),
],
),
);
字体的设置
在pubspec.yaml(空格严格)中引入字体文件
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
使用字体
想使用第三方包内的引入目录变更就可以
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: () => {},
)
图标按钮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部分添加如下内容:
assets:
- images/avatar.png
Image(
image: AssetImage("images/avatar.png"), ##本地引入
image: NetworkImage( ## 网络引入二选一
"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, //对齐方式
repeat : ImageRepeat.noRepeat, //重复方式
);
矢量图icon
体积小:可以减小安装包大小。
矢量的:iconfont都是矢量图标,放大不会影响其清晰度。
可以应用文本样式:可以像文本一样改变字体图标的颜色、大小对齐等。
可以通过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: [
Icon(Icons.accessible,color: Colors.green,),
Icon(Icons.error,color: Colors.green,),
Icon(Icons.fingerprint,color: Colors.green,),
],
)
自定义icon图标
阿里矢量图库
将图片转换成tiff格式
在字体中引入
fonts:
- family: myIcon #指定一个字体名
fonts:
- asset: fonts/iconfont.ttf
自定义和一个类
class MyIcons{
// book 图标
static const IconData book = const IconData(
0xe614,
fontFamily: 'myIcon',
matchTextDirection: true
);
// 微信图标
static const IconData wechat = const IconData(
0xec7d,
fontFamily: 'myIcon',
matchTextDirection: true
);
}
使用
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(MyIcons.book,color: Colors.purple,),
Icon(MyIcons.wechat,color: Colors.green,),
],
)
单选开关和复选框
注意 : 本身不保存状态和移动端的一样 ,所以要在继承State类中管理状态,也就是要自己自定义管理私有属性.
dart
语言下划线就是私有属性。
重要:Switch和Checkbox属性比较简单,读者可以查看API文档(command/ctrl + 左键
),它们都有一个activeColor属性,用于设置激活态的颜色。至于大小,到目前为止,Checkbox的大小是固定的,无法自定义,而Switch只能定义宽度,高度也是固定的。值得一提的是Checkbox有一个属性tristate ,表示是否为三态,其默认值为false ,这时Checkbox有两种状态即“选中”和“不选中”,对应的value值为true和false ;如果其值为true时,value的值会增加一个状态null,读者可以自行了解。
class SwitchAndCheckBoxTestRoute extends StatefulWidget {
@override
_SwitchAndCheckBoxTestRouteState createState() => new _SwitchAndCheckBoxTestRouteState();
}
class _SwitchAndCheckBoxTestRouteState extends State {
bool _switchSelected=true; //维护单选开关状态
bool _checkboxSelected=true;//维护复选框状态
@override
Widget build(BuildContext context) {
return Column(
children: [
Switch(
value: _switchSelected,//当前状态
onChanged:(value){
//重新构建页面
setState(() {
_switchSelected=value;
});
},
),
Checkbox(
value: _checkboxSelected,
activeColor: Colors.red, //选中时的颜色
onChanged:(value){
setState(() {
_checkboxSelected=value;
});
} ,
)
],
);
}
}
下一篇比较重要的控件