一、Text Widget文本组件

基本的Hello World代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 JSPang')
          ),
        ),
      );
  }
}

TextAlign

TextAlign属性就是文本的对齐方式，它的属性值有如下几个：

  • center: 文本以居中形式对齐,这个也算比较常用的了。
  • left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
  • right :右对齐，使用频率也不算高。
  • start:以开始位置进行对齐，类似于左对齐。
  • end: 以为本结尾处进行对齐，不常用。有点类似右对齐.

总结起来，也就算三个对齐方式，left(左对齐)、center（居中对齐）、right（右对齐）

1
2
3
4
child:Text(
  'Hello  ,非常喜欢前端，并且愿意为此奋斗一生。',
  textAlign:TextAlign.left,
)

maxlines

设置最多显示的行数，比如我们现在只显示1行 

1
2
3
4
5
child:Text(
  'Hello ,非常喜欢前端，并且愿意为此奋斗一生。',
  textAlign:TextAlign.left,
  maxLines: 1,
)

overflow

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

style属性

style属性的内容比较多，具体的可以查一下API

下面要作的效果为，字体大小为25.0,颜色为粉红色,并且有一个下划线。

1
2
3
4
5
6
7
8
9
10
11
12
child:Text(
  'Hello 非常喜欢前端，并且愿意为此奋斗一生。',
  textAlign:TextAlign.left,
  overflow:TextOverflow.ellipsis,
  maxLines: 1,
  style: TextStyle(
    fontSize:25.0,
    color:Color.fromARGB(255, 255, 150, 150),
    decoration:TextDecoration.underline,
    decorationStyle:TextDecorationStyle.solid,
  ),
)

二、Container容器组件

Container（容器控件）在Flutter是经常使用的控件，它就相当于我们HTML里的div标签，每个页面或者说每个视图都离不开它。

Alignment

这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。 

1
2
3
4
child: Text(
	'Hello Flutter,陈朗是我儿子陈朗是我二儿子陈朗是我儿子',
          ),
    alignment: Alignment.center,

它的对齐方式还有如下几种：

  • bottomCenter:下部居中对齐。
  • botomLeft: 下部左对齐。
  • bottomRight：下部右对齐。
  • center：纵横双向居中对齐。
  • centerLeft：纵向居中横向居左对齐。
  • centerRight：纵向居中横向居右对齐。
  • topLeft：顶部左侧对齐。
  • topCenter：顶部居中对齐。
  • topRight： 顶部居左对齐。

宽高属性

设置宽、高和颜色属性是相对容易的，只要在属性名称后面加入浮点型数字就可以了，比如要设置宽是500，高是400，颜色为亮蓝色。代码如下： 

1
2
3
4
5
6
7
child:Container(
  child:new Text('Hello Flutter,1111111111111111111111111111',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.center,
  width:500.0,
  height:400.0,
  color: Colors.lightBlue,
),

padding

padding的属性就是一个内边距，它和你使用的前端技术CSS里的padding表现形式一样，指的是Container边缘和child内容的距离。先来看一个内边距为10的例子 

1
padding:const EdgeInsets.all(10.0),

上边距为30，左边距为10，这时候EdgeInsets.all()就满足不了我们了。

我们用EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以满足我们的需求，LTRB分别代表左、上、右、下。

那我们设置上边距为30，左边距为10，就可以用下面的代码来编写。

1
padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),

margin

margin是外边距，只的是container和外部元素的距离。

用法同padding

decoration

decoration是 container 的修饰器，主要的功能是设置背景和边框。

比如你需要给背景加入一个渐变，这时候需要使用BoxDecoration这个类，代码如下（需要注意的是如果你设置了decoration，就不要再设置color属性了，因为这样会冲突）。

1
2
3
4
5
6
decoration: BoxDecoration(
                gradient: const LinearGradient(colors: [
                  Colors.lightBlue,
                  Colors.greenAccent,
                  Colors.purple
                ]),

设置边框

1
2
3
4
5
6
7
decoration: BoxDecoration(
                gradient: const LinearGradient(colors: [
                  Colors.lightBlue,
                  Colors.greenAccent,
                  Colors.purple
                ]),
                border: Border.all(width: 10.0, color: Colors.red)),

三、Image图片组件

加入图片的几种方式

  • Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
  • Image.network:网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
  • Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
  • Image.memory: 加载Uint8List资源图片,这个我目前用的不是很多，所以没什么发言权。
1
2
3
4
5
child: Image.network(
              'https://i1.hdslb.com/bfs/face/6909bc6c97a31c10a1837140587e1ff25461cde1.jpg@96w_96h_1c_1s.webp',
              scale: 1.0,
              color: Colors.greenAccent,
            ),

fit

fit属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的，看看这些属性

  • BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
  • BoxFit.contain:全图显示，显示原比例，可能会有空隙。
  • BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。
  • BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。
  • BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。
  • BoxFit.scaleDown：效果和contain差不多，但是此属性不允许显示超过源图片大小，可小不可大。

图片混合

图片混合模式（colorBlendMode）和color属性配合使用，能让图片改变颜色，里边的模式非常的多，产生的效果也是非常丰富的 

1
2
color: Colors.greenAccent,
colorBlendMode: BlendMode.darken,

repeat

  • ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。
  • ImageRepeat.repeatX: 横向重复，纵向不重复。
  • ImageRepeat.repeatY：纵向重复，横向不重复。
1
2
3
4
5
6
7
8
child: Image.network(
              'https://i1.hdslb.com/bfs/face/6909bc6c97a31c10a1837140587e1ff25461cde1.jpg@96w_96h_1c_1s.webp',
              scale: 1.0,
              fit: BoxFit.contain,
              color: Colors.greenAccent,
              colorBlendMode: BlendMode.darken,
              repeat: ImageRepeat.repeat,
            ),