1. 普通文本
Flutter中普通文本使用Text（）函數(shù)創(chuàng)建，常見的屬性如下：
-
textAlign： 文本位置
- enum TextAlign {
left,
right,
center,
justify,///拉伸以軟換行符結(jié)尾的文本行括儒，以填充其寬度容器绕沈。以硬換行符結(jié)尾的行朝[start]邊緣對齊。
start, ///在容器的前端對齊文本塑崖。對于從左到右的文本七冲，這是左邊緣。對于從右到左的文本规婆，這是右邊緣澜躺。
end, //在容器的尾端對齊文本。對于從左到右的文本抒蚜，這是右邊緣掘鄙。對于從右到左的文本，這是左邊緣嗡髓。
}
- enum TextAlign {
- maxLines： 文本展示行數(shù)
-
style： 文字樣式
- TextStyle({
this.inherit = true, //繼承
this.color,//文字顏色
this.backgroundColor, //背景色
this.fontSize, //字體大小
this.fontWeight,//加粗效果
this.fontStyle, //正常-斜體
this.wordSpacing, //文字間距
this.background, //背景（可以是圖片）
this.shadows, //陰影
}
- TextStyle({
-
overflow： 換行模式：（常用的是展示不全展示省略號）
- enum TextOverflow {
clip, ///剪輯溢出的文本以修復其容器
fade, ///漸變效果
ellipsis,///省略號...
visible,///在其容器外渲染溢出文本
}
- enum TextOverflow {
效果
代碼如下：
import 'package:flutter/material.dart';
class BaseWidget_Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
final String _title = 'Hellow Fultter';
final String _author = 'YYFast';
final String _des =
'額粉紅色皇甫嵩惡化煩死額混復搜紅額粉紅色皇甫嵩惡化煩死額我還是foe耦合foe回復搜嗯好佛森分紅額粉紅色皇甫嵩惡化煩死額';
return Container(
height: 500,
width: 621,
color: Colors.red[100],
child: Column(
children: <Widget>[
Text(
'$_title\n$_author\n$_des',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.black87,
),
maxLines: 4, //最大行數(shù)
overflow: TextOverflow.clip,
),
Container(height: 20),
Text(
'$_des',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.red,
),
maxLines: 2, //最大行數(shù)
overflow: TextOverflow.fade,
),
Container(height: 20),
Text(
'$_des',
textAlign: TextAlign.center,
style: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 18,
color: Colors.blue,
),
maxLines: 2, //最大行數(shù)
overflow: TextOverflow.ellipsis,
),
Container(height: 20),
Text(
'$_des',
textAlign: TextAlign.center,
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 18,
color: Colors.green,
),
maxLines: 2, //最大行數(shù)
overflow: TextOverflow.visible,
),
],
));
}
}
2 富文本
Flutter中富文本使用RichText（）函數(shù)創(chuàng)建操漠，與普通文本不同的是可以使用TexSpan（）函數(shù)，可以拼接子串饿这，一個成員為<TextSpan>的數(shù)組浊伙；其他基本屬性使用的是普通文本Text（）的基本屬性：
//富文本
class RichText_Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 621,
height: 500,
color: Colors.amber,
child: Column(
children: <Widget>[
RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Flutter Text Test',
style: TextStyle(
backgroundColor: Colors.grey[100],
fontSize: 26,
color: Colors.green,
),
children: <TextSpan>[
TextSpan(
text: '\n測試測試測試測試測試測試',
style: TextStyle(
backgroundColor: Colors.grey[100],
fontSize: 24,
color: Colors.blue,
),
),
TextSpan(
text: '\n測試測試測試測試測試測試',
style: TextStyle(
backgroundColor: Colors.grey[100],
fontSize: 20,
color: Colors.blue,
),
),
TextSpan(
text: '\n測試測試測試測試測試測試',
style: TextStyle(
backgroundColor: Colors.grey[100],
fontSize: 16,
color: Colors.blue,
),
)
]))
],
),
);
}
}
示例
3 布局
Flutter布局主要使用的是以下這3中樣式
- Row：X方向，子視圖控件橫向布局展現(xiàn)
- Columnn：Y方向长捧，子視圖控件縱向布局展現(xiàn)
- Stack：Z方向嚣鄙，子視圖控件正向布局展現(xiàn)
這3種樣式分別組合起來構(gòu)成了Flutter的布局樣式，這3中樣式分別可以添加children串结，可以是Container哑子，可以是Text，也可以是Icon等等...這也就使得布局豐富肌割，樣式多起來卧蜓；
Flutter布局結(jié)構(gòu)圖
3.1 Row 和 Column
在使用Row和Cloumn布局的時候，要注意兩個點：
- 主軸方向：Row布局為水平方向把敞；Column布局為豎直方向
- 交叉方向：Row布局為豎直方向弥奸；Column布局為水平方向
以下示例為Row（水平布局）；
- mainAxisAlignment：主軸方向
- center 中間對齊
- start, 起始位置（X方向為左邊left奋早，Y方向為頂部top）
- end其爵，結(jié)束位置（X方向為左邊right冒冬，Y方向為頂部bottom）
- spaceAround,平局分配在之間和兩邊
- spaceBetween,平均分配在之間，兩邊間距為0
- spaceEvenly,等間距的
主軸start-end
主軸spaceAround-spaceBetween
- crossAxisAlignment：交叉方向
- center 中間對齊
- star, 起始位置（X方向為左邊left摩渺，Y方向為頂部top）
- end简烤，結(jié)束位置（X方向為左邊right，Y方向為頂部bottom）
- stretch,要求子視圖填充交叉軸,這導致傳遞給子級的約束在交叉軸摇幻。
- baseline,要與文本Text配合使用横侦，控件的文本底部基準線必須對齊，使用較少
交叉軸start-end
代碼如下：
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blue,
alignment: Alignment(0, 0),
child:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(child: Icon(Icons.add, size: 120), color: Colors.red),
Container(child: Icon(Icons.add_a_photo, size: 80), color: Colors.green),
Container(child: Icon(Icons.add_alarm, size: 60), color: Colors.white),
Text('主軸-spaceBetween'),
]));
}
}
3.2 Stack
在使用Stack布局绰姻，也稱為層級布局的時候枉侧，主要使用到了三個個控件：
AspectRatio ：比例，相對于父控件的比例
Alignment ：相對于中心點（0狂芋，0）的位置榨馁，取值為 -1 ~ 1，為比例值,如下圖示例：
當Alignment取值為（0帜矾，0）時在中心位置翼虫，取其它值時如圖小紅塊的位置；
Alignment取值示例：圖中紅色方塊位置
-
Positioned：相對于父控件的位置屡萤，類似于相對布局珍剑。使用方式是用其將Container包裝起來，用于描述Container的布局屬性死陆，位置大小等招拙，而Container用于展示；
- const Positioned({
Key key,
this.left, //距左
this.top, //距上
this.right, //距右
this.bottom, //距底
this.width, //寬度
this.height, //高度
})
- const Positioned({
Positioned取值示例
代碼示例：
注意：left措译，right别凤，top，bottom的取值不一定為0领虹，可以是任意數(shù)值规哪，根據(jù)實際布局而定
class Stack_Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment(0.0, 0.0),
color: Colors.yellow,
child: Stack(
children: <Widget>[
Container(
height: 200,
width: 200,
color: Colors.blue,
),
Positioned(
left: 0,
top: 0,
width: 30,
height: 30,
child: Container(
color: Colors.red,
)),
Positioned(
right: 0,
top: 0,
width: 30,
height: 30,
child: Container(
color: Colors.white,
)),
Positioned(
bottom: 0,
left: 0,
width: 30,
height: 30,
child: Container(
color: Colors.orange,
)),
Positioned(
bottom: 0,
right: 0,
width: 30,
height: 30,
child: Container(
color: Colors.cyan,
))
],
),
);
}
}
4 狀態(tài)管理State
在Flutter控件Widget中，有兩種狀態(tài)：
- StatelessWidget: 無狀態(tài)控件掠械，不需要刷新數(shù)據(jù)，更新布局等操作注祖，不需要manager管理猾蒂；
- StatefulWidget: 有狀態(tài)控件，需要刷新展示數(shù)據(jù)是晨，更新布局等操作肚菠，需要manager管理；
在這里主要了解有狀態(tài)的：StatefulWidget罩缴，因為我們開發(fā)中大部分控件或者界面都需要改變狀態(tài)蚊逢，比如刷新count层扶，改變背景色，改變布局等烙荷；這時候镜会，就需要一個manager來操作，對Widget重新build操作终抽；
比如示例Demo中戳表，點擊右下角的按鈕，中間的數(shù)字會+1昼伴，這種的就是有狀態(tài)的Widget匾旭，需要一個manager來管理其狀態(tài)；
示例demo
StatefulWidget代碼示例：
import 'package:flutter/material.dart';
class StateMagDemon extends StatefulWidget {
@override
_StateMagDemonState createState() => _StateMagDemonState();
}
class _StateMagDemonState extends State<StateMagDemon> {
int _count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("StateManagerDemo"),
),
body: Center(
child: Chip(label: Text('$_count')),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
_count++;
setState(() {});
print('number = $_count');
},
),
);
}
}
注意：
- 在StateMagDemon（）中圃郊，需要創(chuàng)建createState()价涝；如果傳入?yún)?shù)還需要構(gòu)造函數(shù)，為創(chuàng)建Widget使用持舆；
- _StateMagDemonState（）色瘩，用于管理數(shù)據(jù)及刷新，重新build吏廉，例如示例中的_count泞遗；
- 數(shù)據(jù)_count改變以后，需要調(diào)用刷新方法setState(() {})席覆，重新built控件史辙，來達到刷新的效果。
