Flutter —— 文本和Container

1. 文本

1.1 Text

首先创建一个简单的Text，然后输入文本后运行。

class TextDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Text(
      "大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏"
    );
  }
}

当加上textAlign: TextAlign.center之后，那么文字就会居中对齐。那么对应的.left 和 .right 则分别是左右对齐。

textAlign: TextAlign.center

文本里还可以添加style，这里有两种添加方式，一种是直接在Text里面的style添加，一种则是声明最终变量后使用。

class TextDemo extends StatelessWidget {

  final TextStyle _textStyle = TextStyle(
    fontSize:39,
  );
  @override
  Widget build(BuildContext context) {
    return Text(
      "大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏",
      textAlign: TextAlign.center,
      style:TextStyle(
        fontSize: 20,
      ),
    );
  }
}

这里也可以声明字符串然后进行字符串的拼接

  final String _lecturer = "LS";
  final String _title = "Flutter";
  //Text里面的文字变成
    "${'《' + _title + '》' + " ————  "+ _lecturer + "  "  }大扎好，我系轱天乐，我四渣渣辉，探挽懒月，介四里没有挽过的船新版本，挤需体验三番钟，里造会干我一样，爱象节款游戏",

运行后得到：

这里可以通过maxLines来进行最大行数的限制,然后运用overflow进行超出文字的处理。

 maxLines:1
 overflow: TextOverflow.ellipsis,

1.2 RichText

我们在进行开发的时候经常会遇到一段文本中会有不同的字体，不同的颜色展示，RichText就是用来解决这些问题的。 简单的样例：

RichText(
      text: const TextSpan(
        children:  <TextSpan>[
          TextSpan(
            text: "《Flutter》",
            style: TextStyle(
              fontSize: 30,
              color: Colors.black,
            ),
          ),
          TextSpan(
            text: "--",
            style: TextStyle(
              fontSize: 40,
              color: Colors.red,
            ),
          ),
        ],

      ),
    );

2. Container

Container作为Flutter中的用来布局的Widget，通常当作容器使用，相当于IOS的UIView。

class TextDemo extends StatelessWidget {
  const TextDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color:Colors.yellow
    );
  }
}

如果子部件中有Container，那么就不能用const来修饰，否则会报错。

Container里面如果不给子部件的话，那么他就没有大小，就不会显示出来。当然有一些特殊情况例外，比如在Scaffold里面的body大小就会为body的大小。不指定大小的话，Container的大小会跟着子部件的大小以及边距而变化。

  padding: EdgeInsets.all(30),
 margin: EdgeInsets.all(10),

如果Container的大小不够满足边距的话会优先满足左边和上边的边距。

 Container(
            color:Colors.red,
            child: Icon(Icons.add),
            padding: EdgeInsets.all(180),
            margin: EdgeInsets.all(10),
            height: 200,
            width: 200,
          ),

如果边距超过Container大小的话就会跑到外面。

Container 中还有一个属性alignment。Alignment继承自AlignmentGeometry，表示矩形内的一个点，他有两个属性x、y，分别表示在水平和垂直方向的偏移。Alignment Widget会以矩形的中心点作为坐标原点，即Alignment(0.0, 0.0) 。x、y的值从-1到1分别代表矩形左边到右边的距离和顶部到底边的距离，因此2个水平（或垂直）单位则等于矩形的宽（或高），如Alignment(-1.0, -1.0) 代表矩形的左侧顶点，Alignment(-1.0, 1.0) 代表矩形的左侧底部终点,而Alignment(1.0, 1.0)代表右侧底部终点，而Alignment(1.0, -1.0) 则正是右侧顶点，即Alignment.topRight。为了使用方便，矩形的原点、四个顶点，以及四条边的终点在Alignment类中都已经定义为了静态常量。

 const Alignment(this.x, this.y)
    : assert(x != null),
      assert(y != null);

这个时候Text就会在中心点。

Container(
      color: Colors.yellow,
      child: Text("hello my friends"),
       alignment: Alignment(0.0,0.0),
      );