Text Widget

  • Flutter中一切皆组件!Flutter控件之TextText对一个APP而言文本无处不在,Text是进行Flutter开发最常用的组件之一
  • 文本组件显示一个但一样式的文本字符串,字符串可能多行显示,也可能全部显示在一行中,具体取决于布局约束
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 引入UI库
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{

@override
Widget build(BuildContext context){
return MaterialApp(
title:'Text Widget',
home: Scaffold(
body:Center(
child: Text('Hello Widget'),
),
),
);
}
}

TextAlign

  • TextAlign属性就是文本的对齐方式,它的属性值有如下几个
属性值 描述
center 文本以居中形式对齐,这个也算比较常用的了
left 左对齐,经常使用,让文本居左进行对齐,效果和start一样
right 右对齐,使用频率也不算高
start 以开始位置进行对齐,类似于左对齐
end 以为本结尾处进行对齐,不常用。有点类似右对齐
1
2
3
4
child:Text(
'Hello Widget',
textAlign:TextAlign.left,
)

maxLines

  • 设置最多显示的行数,比如我们现在只显示1行,类似一个新闻列表的题目
1
2
3
4
5
child:Text(
'Hello Man ,我非常喜欢前端,并且愿意为此奋斗一生',
textAlign:TextAlign.left,
maxLines: 1,
)

overflow

  • overflow属性是用来设置文本溢出时
    • clip:直接切断,剩下的文字就没有了,感觉不太友好,体验性不好
    • ellipsis:在后边显示省略号,体验性较好,这个在工作中经常使用
    • fade::溢出的部分会进行一个渐变消失的效果,当然是上线的渐变,不是左右的哦
1
2
3
4
5
6
child:Text(
'Hello Man ,我非常喜欢前端,并且愿意为此奋斗一生',
textAlign:TextAlign.left,
maxLines: 1,
overflow:TextOverflow.ellipsis
)

style

  • style属性的内容比较多,具体可以查一下API,比如做一个效果:字体大小为25.0,颜色为粉红色,并且有一个下划线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 引入UI库
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Widget',
home: Scaffold(
body: Center(
child: Text('Hello Widget',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
// css
style: TextStyle(
fontSize: 25.0,
color: Color.fromARGB(255, 255, 150, 150),
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.solid,
)),
),
),
);
}
}

Button Widget

  • Flutter 里有很多的 Button 组件很多,常见的按钮组件有
    • RaiseButton:凸起的按钮,Material Design风格的按钮
    • FlatButton:扁平化按钮
    • OutlineButton:线框按钮
    • IconButton:图标按钮
    • ButtonBar:按钮组
    • FloatingActionButton:浮动按钮
  • 在flutter中,按钮组件有以下常用属性
1
2
3
4
5
6
7
8
9
10
11
onPressed :必填参数,按下按钮时触发的回调,接收一个方法,传 null 表示按钮禁用,会显示禁用相关样式 
child :文本控件
textColor :文本颜色
color :文本颜色
disabledColor :按钮禁用时的颜色
disabledTextColor :按钮禁用时的文本颜色
splashColor :点击按钮时水波纹的颜色
highlightColor :点击(长按)按钮后按钮的颜色
elevation :阴影的范围,值越大阴影范围越大
padding :内边距
shape :设置按钮的形状
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// 去掉右上角debug
debugShowCheckedModeBanner: false,
home: ButtonDemo(),
);
}
}

class ButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter_Demo'),
elevation: 10.0, // 阴影
centerTitle: true, // 居中
),
body: Column(children: [
RaisedButton(onPressed: () {}, child: Text("漂浮按钮")),
FlatButton(onPressed: () {}, child: Text("扁平按钮")),
FlatButton.icon(
onPressed: () {},
icon: Icon(Icons.add), // 图标
label: Text('添加'),
color: Colors.green,
textColor: Colors.white,
),
OutlinedButton(onPressed:(){}, child: Text('OutlinedButton')),
IconButton(icon: Icon(Icons.home),onPressed: (){})
]),
);
}
}

Container Widget

  • Container(容器控件)在Flutter是经常使用的控件,它就相当于我们HTML里的<div>标签,每个页面或者说每个视图都离不开它

Alignment

  • 其实容器的作用就是方便我们进行布局的,Flutter这点也作的很好,我们先来看容器属性中的Alignment
  • 这个属性针对的是Containerchild的对齐方式,也就是容器子内容的对齐方式,并不是容器本身的对齐方式
  • 先作一个效果:建立一个容器,然后容器内加入一段文字, 并让它居中对齐
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 引入UI库
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Widget',
home: Scaffold(
body: Center(
child: Container(
child: new Text('Hello world',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.center,
)
),
),
);
}
}
  • Alignment有以下属性
属性 说明
bottomCenter 下部居中对齐
botomLeft 下部左对齐
bottomRight 下部右对齐
center 纵横双向居中对齐
centerLeft 纵向居中横向居左对齐
centerRight 纵向居中横向居右对齐
topLeft 顶部左侧对齐
topCenter 顶部居中对齐
topRight 顶部居左对齐

样式设置

  • 设置宽、高和颜色属性是相对容易的,只要在属性名称后面加入浮点型数字就可以了,比如要设置宽是500,高是400,颜色为亮蓝色
1
2
3
4
5
6
7
child:Container(
child:new Text('Hello world',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.center,
width:500.0,
height:400.0,
color: Colors.lightBlue,
),

padding

  • padding的属性就是一个内边距,它和你使用的前端技术CSS里的padding表现形式一样,指的是Container边缘和child内容的距离
1
2
3
4
5
6
7
8
9
child:Container(
child:new Text('Hello world',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
color: Colors.lightBlue,
// 设置padding 设置Container的内边距是10,左右上下全部为10
padding:const EdgeInsets.all(10.0),
),
  • 如果上边距为30,左边距为10,这时候EdgeInsets.all()就满足不了我们了;我们用EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以满足我们的需求,LTRB分别代表左、上、右、下
1
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),

decoration

  • decoration是 container 的修饰器,主要的功能是设置背景和边框
  • 比如你需要给背景加入一个渐变,这时候需要使用BoxDecoration这个类,代码如下(需要注意的是如果你设置了decoration,就不要再设置color属性了,因为这样会冲突)
1
2
3
4
5
6
7
8
9
10
11
12
13
child:Container(
child:new Text('Hello world',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
)
),
),
  • 设置边框可以在decoration里设置border属性,比如你现在要设置一个红色边框,宽度为2。代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
child:Container(
child:new Text('Hello world',style: TextStyle(fontSize: 40.0),),
alignment: Alignment.topLeft,
width:500.0,
height:400.0,
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),
margin: const EdgeInsets.all(10.0),
decoration:new BoxDecoration(
gradient:const LinearGradient(
colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
),
border:Border.all(width:2.0,color:Colors.red)
),
),

Image Widget

图片引入

  • Image.asset:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径
  • Image.network:网络资源图片,意思就是你需要加入一段 http://xxxx.xxx 的这样的网络路径地址
  • Image.file:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关
  • Image.memory: 加载Uint8List资源图片,这个目前用的不是很多
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'Text widget',
home:Scaffold(
body:Center(
child:Container(
child:new Image.network(
'https://cdn.jsdelivr.net/gh/xiaoliblog/MyCDNRepo/img/headerimg.png',
scale:1.0,
fit:BoxFit.fill
),
width:300.0,
height:200.0,
color: Colors.lightBlue,
),
),
),
);
}
}

fit

  • fit属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的
属性 说明
BoxFit.fill 全图显示,图片会被拉伸,并充满父容器
BoxFit.contain 全图显示,显示原比例,可能会有空隙
BoxFit.cover 显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)
BoxFit.fitWidth 宽度充满(横向充满),显示可能拉伸,可能裁切
BoxFit.fitHeight 高度充满(竖向充满),显示可能拉伸,可能裁切
BoxFit.scaleDown 效果和contain差不多,但是此属性不允许显示超过源图片大小,可小不可大

colorBlendMode

  • 图片混合模式(colorBlendMode)和color属性配合使用,能让图片改变颜色,里边的模式非常的多,产生的效果也是非常丰富的
    • color:是要混合的颜色,如果你只设置color是没有意义的
    • colorBlendMode:是混合模式,相当于我们如何混合
1
2
3
4
5
child:new Image.network(
'https://cdn.jsdelivr.net/gh/xiaoliblog/MyCDNRepo/img/headerimg.png',
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,
),

repeat

  • ImageRepeat.repeat :横向和纵向都进行重复,直到铺满整个画布
  • ImageRepeat.repeatX:横向重复,纵向不重复
  • ImageRepeat.repeatY:纵向重复,横向不重复
1
2
3
4
child:new Image.network(
https://cdn.jsdelivr.net/gh/xiaoliblog/MyCDNRepo/img/headerimg.png',
repeat: ImageRepeat.repeat,
),

本地引入

  • 如果想配置项目资源文件,就需要使用pubspec.yaml文件,需要把资源文件在这里声明
  • 比如在项目根目录下新建了一个images文件夹,文件夹下面放了一个图片,图片的名称叫做head.jpg,那我们在pubspec.yaml文件里就要写如下代码进行声明
1
2
3
flutter:
assets:
- images/head.jpg
  • 有了声明后,我们就可以直接在项目中引用这个文件了
1
2
3
4
5
6
7
8
9
10
11
12
import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Image.asset('images/head.jpg'),
);
}
}