Flutter 中有不少 UI 控件,而文本、图片和按钮是 Flutter 中最基本的控件,构建视图基本上都要使用到这三个基本控件算法
文本是视图系统中的常见控件,用于显示一段特定样式的字符串,在 Flutter 中,文本展现是经过 Text 控件实现的缓存
Text 支持的文本展现类型bash
单同样式的文本 Text网络
混合样式的富文本 Text.richapp
使用 Image 来加载不一样形式、不一样格式的图片less
支持高级功能的图片控件ide
经过按钮,能够响应用户的交互事件。Flutter 中提供了三个最基本的按钮控件:FloatingActionButton、FlatButton、RaisedButton函数
按钮控件中的参数布局
如下为具体代码实现测试
void main() => runApp(MyBasiControl());
/**
* 经典控件
*/
class MyBasiControl extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyText(),
);
}
}
String content = '欢迎关注\nAndroid小白营\n在这里咱们能够一块儿成长\n';
class MyText extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Android小白营'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'如下为不一样样式的文本控件\n\n单同样式文本 Text\n一:默认样式\n' + content,
),
Text(
'二:自定义样式:居中显示,黑色背景,白色14号粗体字体\n' + content,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
backgroundColor: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
Text.rich(TextSpan(children: [
TextSpan(
text: '\n富文本 Text.rich\n',
style: TextStyle(color: Colors.red, fontSize: 20)),
TextSpan(text: '欢迎关注\n'),
TextSpan(
text: 'Android小白营\n',
style: TextStyle(
color: Colors.blueAccent,
fontWeight: FontWeight.bold,
fontSize: 18)),
TextSpan(
text: '在这里咱们能够一块儿成长',
style: TextStyle(
backgroundColor: Colors.deepOrangeAccent,
color: Colors.cyanAccent,
fontSize: 16))
])),
FlatButton(
color: Colors.cyanAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0)),
onPressed: () {
Fluttertoast.showToast(msg: '测试点击事件');
},
colorBrightness: Brightness.light,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add_circle_outline),
Text('添加')
],
))
],
));
}
}
复制代码