Flutter Container容器组件、Text文本组件详解

import 'package:flutter/material.dart';
 
void main(){
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        body:HomeContent()
      )
    );
  }
}
 
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
          child: Container(
              child: Text(
                'hello world  学无止境的最高境界！！！',
                textAlign:TextAlign.left,
                overflow:TextOverflow.ellipsis ,
                // overflow:TextOverflow.fade ,
                maxLines: 1,
                textScaleFactor: 1.8,
                style:TextStyle(
                  fontSize: 16.0,
                  color:Colors.red,
                  // color:Color.fromARGB(a, r, g, b)
                  fontWeight: FontWeight.w800,
                  fontStyle: FontStyle.italic,
                  decoration:TextDecoration.lineThrough,
                  decorationColor:Colors.white,
                  decorationStyle: TextDecorationStyle.dashed,
                  letterSpacing: 5.0
 
                )
 
              ),
              height: 300.0,
              width: 300.0,
              decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(
                  color: Colors.blue,
                  width: 2.0
                ),
                borderRadius: BorderRadius.all(
                //  Radius.circular(150),    //圆形
                  Radius.circular(10),
                )
              ),
              // padding:EdgeInsets.all(20),
 
              // padding:EdgeInsets.fromLTRB(10, 30, 5, 0)
 
              margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
 
              // transform:Matrix4.translationValues(100,0,0)
 
              // transform:Matrix4.rotationZ(0.3)
 
              // transform:Matrix4.diagonal3Values(1.2, 1, 1)
 
              alignment: Alignment.bottomLeft,
 
          ),
    );
  }
 
}

Flutter Text 组件

TextAlign属性

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

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

最常用的三个：left(左对齐)、center（居中对齐）、right（右对齐）

maxLines属性

设置最多显示的行数，比如我们现在只显示1行。代码如下：

child:Text(
  'Hello',
  textAlign:TextAlign.left,
  maxLines: 1,
)

overflow属性

overflow属性是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。

clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦。

style属性

字体的样式设置

下面是 TextStyle 的参数 :

名称	功能
decoration	文字装饰线(none 没有线，lineThrough 删除线，overline 上划线，underline 下划线)
decorationColor	文字装饰线颜色
decorationStyle	文字装饰线风格([dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪线)
wordSpacing	单词间隙(如果是负值，会让单词变得更紧凑

letterSpacing	字母间隙(如果是负值，会让字母变得更紧凑)
fontStyle	文字样式(italic 斜体，normal 正常体)
fontSize	文字大小
color	文字颜色
fontWeight	字体粗细(bold 粗体，normal 正常体)

Container容器组件

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

alignment属性

其实容器的作用就是方便我们进行布局的，Flutter这点也作的很好，我们先来看容器属性中的Alignment。

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

先作一个效果：建立一个容器，然后容器内加入一段文字, 并让它居中对齐。

topCenter:顶部居中对齐
topLeft:顶部左对齐
topRight:顶部右对齐
center:水平垂直居中对齐
centerLeft:垂直居中水平居左对齐
centerRight:垂直居中水平居右对齐
bottomCenter 底部居中对齐
bottomLeft:底部居左对齐
bottomRight:底部居右对齐

      child:Container(
             child:new Text('Hello',style: TextStyle(fontSize: 40.0),),
             alignment: Alignment.center,
      ),

设置宽、高和颜色属性

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

child:Container(
  child:new Text('Hello,style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.center,
  width:200.0,
  height:40.0,
  color: Colors.lightBlue,
),

padding属性

padding的属性就是一个内边距，它和你使用的前端技术CSS里的padding表现形式一样，指的是Container边缘和child内容的距离。设置内边距为10的示例代码如下：

child:Container(
  child:new Text('Hello',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.topLeft,
  width:200.0,
  height:40.0,
  color: Colors.lightBlue,
  padding:const EdgeInsets.all(10.0),
),

核心代码：

padding:const EdgeInsets.all(10.0),

意思是设置Container的内边距是10，左右上下全部为10

如果设置不一样，则使用下列的方法实现：

EdgeInsets.fromLTRB(value1,value2,value3,value4)

padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),  //上边距为30，左边距为10

margin属性

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

方法同padding使用相同

 margin: const EdgeInsets.all(10.0),

margin:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),//上外边距为30，左外边距为10

decoration属性

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

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

child:Container(
  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),
  alignment: Alignment.topLeft,
  width:200.0,
  height:40.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。代码如下：

decoration:new BoxDecoration(
    gradient:const LinearGradient(
      colors:[Colors.lightBlue,Colors.greenAccent,Colors.purple]
    ),
    border:Border.all(width:2.0,color:Colors.red)
  ),

设置圆角，圆形等外框

decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(
                  color: Colors.blue,
                  width: 2.0
                ),
                borderRadius: BorderRadius.all(
                //  Radius.circular(150),    //圆形
                  Radius.circular(10),
                )
  ),

transform 属性

让 Container 容易进行一些旋转之类的

// transform:Matrix4.translationValues(100,0,0)
// transform:Matrix4.rotationZ(0.3)
 transform:Matrix4.diagonal3Values(1.2, 1, 1)