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
  • 这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式
  • 先作一个效果：建立一个容器，然后容器内加入一段文字, 并让它居中对齐
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'),
    );
  }
}