Flutter 学习第八天 多子组件布局

这个转自我自己的有道云 想看图片去那里

http://note.youdao.com/noteshare?id=a72c965bf9e1194b2d4873c64479f408&sub=25B1E0477B0B4C3CAF8384F640C2EC2B

Row Column Expanded Stack布局组件的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ic6Rmy2m-1584343733216)(36837295AFEB471B900449DBD830A95E)]

• 我们的Column 和 Row就是继承至FlexWidget
• FlexWidget里面有一个direction只要设置对应的方向它就是Column或者是Row了

Flex布局

我们看到这个源码里面的构造函数有一个必传参数 这个参数就是方向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ftVF5rM3-1584343733219)(5C0747DEF4AB451E8EAE80A34EE29CE4)]

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    /**
     * 如果你学过css的flex布局
     * Flex(
     *   direction: Axis.horizontal,
     *  ); == Row
     *
     *  Flex(
     *   direction: Axis.vertical,
     *  ); == Column
     *
     *  但是我们在开发的时候尽量还是用Column 和 Row 因为他们意思很清楚
     */
    return Flex(
      direction: Axis.vertical,
    );
  }
}

我们直接使用这个Row和Column居多 因为它见名知意

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-87kFdk4m-1584343733221)(3349137B223F4307888CA3EB2377389B)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-co9NKnzO-1584343733223)(5F31502FECDD40F0B62C0D7EC295AA8C)]

主轴交叉轴

这个区分主要为到时候使用参数去调整做区分

Row是水平排布的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mnVZULWN-1584343733224)(1E7AEF801B0A4BEEB2D5BF94DB1E4B3A)]

Column是垂直排布的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FKcoCD9v-1584343733226)(3402A9A53628430AA33791EEF9599E7A)]

Row

将里面的组件进行水平方向排布

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          width: 80,
          height: 60,
          color: Colors.red
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fwz3udYC-1584343733228)(DBE49C0CA06B47CEB43FFDF10E321133)]

但是我们对它现在的这个状态不是很满意 所以我们要对他进行操作

• 我们现在希望将空白的部分对它做平分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Pefr7NT-1584343733229)(6E17574E7DF9477FA1C3A356DBAE7E0F)]

当让我们可以用SizedBox来完成 同时为了计算这个宽度我们还可以通过

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        SizedBox(width: 10),
        Container(
          width: 80,
          height: 60,
          color: Colors.red
        ),
        SizedBox(width: 10),
        Container(
            width: 120,
            height: 100,
            color: Colors.green
        ),
        SizedBox(width: 10),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue
        ),
        SizedBox(width: 10),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ga9UrwKH-1584343733230)(1BE291F6CDF64D83BB70A06E02F13D6E)]

但是这样是随便说的 还需要对设置做适配

MediaQuery.of(context).size.width来获取屏幕的宽度

mainAxisAlignment

但是这样做非常麻烦不说还有可能错, 所以我们不用 我们用这个mainAxisAlignment

mainAxisAlignment这个东西就可以在水平上调整对齐方式 它是主轴方向上的对齐方式

mainAxisAlignment需要的传的参数就是MainAxisAlignment是一个枚举类型

MainAxisAlignment的取值:

• start： 所有的元素按主轴的方向排布 (默认)
• end: 所有的元素按主轴的反方向排布
• 如果想要反方向排布我们可以使用textDirection来排布
• center: 在主轴中心点对齐 还是从左往右摆
• spaceBetween: 左右两边的间距为0 其他的地方平分
• spaceAround: 左右两边也加入平分的行列 但是是其他的间距的一半
• spaceEvenly： 所有的间距全部平分

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          width: 80,
          height: 60,
          color: Colors.red
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange
        )
      ],
    );
  }
}

MainAxisAlignment.start: 所有的元素按主轴的方向排布 (默认)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eAIpadBM-1584343733231)(E0159BF81B274E139B98B8321D2200AF)]

MainAxisAlignment.end: 所有的元素按主轴的反方向排布

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MoicWGS-1584343733232)(85D84125E6A1469D83A3DCDEAAD79A50)]

如果你想要反方向排布我们可以使用textDirection

但是开发中不建议使用这个属性, 除非是国际化

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      textDirection: TextDirection.rtl,
      children: [
        Container(
          width: 80,
          height: 60,
          color: Colors.red
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TVF6nBoP-1584343733233)(40659B7B12CF40DEBCA8D03E5FCBF3BF)]

MainAlignment.center: 主轴中心点对齐

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bjo93gjh-1584343733234)(07C7474ADECC49DA8626440160C344EB)]

MainAxisAlignment.spaceBetween: 左右两边的间距为0 其他的地方平分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NZp3OKm1-1584343733235)(B39F9D8D4608466EBAEA923FADE52568)]

MainAxisAlignment.spaceAround: 左右两边的间距是其他间距的一半

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UUX7Od8x-1584343733237)(8F4A083BF4474E5980672D5F23D1D57E)]

MainAxisAlignment.spaceEvently: 所有的间距平分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6pPU1jds-1584343733238)(8768567DDDD942E0B7AB1C4A19189269)]

• Row的特点

它会占据整个水平方向上的空间

• 水平方向上占据比较大的空间
• 垂直方向上也希望是包裹内容: 那么我们可以设置mainAxisSize = min

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.red,
      child: Row(
        children: [
          Icon(Icons.bug_report),
          Text("bug报告")
        ],
      ),
      onPressed: () => print("点击"),
    )
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WxqZrWW9-1584343733240)(57F73999010F40F99C8D1858AD27DC9C)]

如果我们希望水平方向上包裹内容我们就要用这个mainAxisSize属性

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.red,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.bug_report),
          Text("bug报告")
        ],
      ),
      onPressed: () => print("点击"),
    )
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HkWpEbKu-1584343733241)(7DB9916E3EBA457E94AA84E2DC719CF7)]

之前说过了 button会有一个默认的宽度和高度

那么我们用在现在的情况试试

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      //      textDirection: TextDirection.rtl,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange
        )
      ],
    );
  }
}

现在的话 由于空间都没有所以也没有办法分这个 宽度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzwu1QjY-1584343733243)(D3CB311D31734511BB30F2354690E9F9)]

默认是max

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oXiJ3wPX-1584343733244)(5855E0076E554660B7B1B4104BE58005)]

交叉轴crossAxisAlignment

CrossAxisAlignment:

• start: 交叉轴起始位置对齐
• end: 交叉轴结束位置对齐
• center: 中心对齐(默认值)
• baseline: 基线对齐
• values是获取到所有的枚举的值 print(ColorSS.values);

crossAxisAlignment.start： 交叉轴起始位置对齐

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      //      textDirection: TextDirection.rtl,
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange
        )
      ],
    );
  }
}

使用start所有的元素都顶格了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RPkdRPgM-1584343733245)(9FEC1E52F4D84238B2E633BA42397271)]

CrossAxisAlignment.end: 交叉轴结束位置对齐

我们垂直方向上是默认包裹内容的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lOBpYwyP-1584343733247)(3ED43F387E904B9596DBD7D872339386)]

CrossAxisAlignment.center: 中心对齐(默认值)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHzGYs9q-1584343733249)(6D5C0CA7F8344EA985255FCF6BAB77BB)]

CrossAxisAlignment.stretch: 将我们的子元素 垂直方向拉升到最大(注意 这个最大还不是一般意义的最大)

它的父元素(Row)会先看一下是否还能占据跟多的空间 如果还可以占据 那就会去占据更多的空间

然后再把里面的东西拉升到同样的高度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NCotZhFx-1584343733250)(0756AEC694F84403B1A17EF19D4C5982)]

但是如果你觉得这个太大了 我们可以给这个Row包裹一个Container

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        //      textDirection: TextDirection.rtl,
        textBaseline: TextBaseline.ideographic,
        verticalDirection: VerticalDirection.up,
        mainAxisSize: MainAxisSize.max,
        children: [
          Container(
              width: 80,
              height: 60,
              color: Colors.red,
              child: Text("text", style: TextStyle(fontSize: 20))
          ),
          Container(
              width: 120,
              height: 100,
              color: Colors.green,
              child: Text("world", style: TextStyle(fontSize: 30))
          ),
          Container(
              width: 90,
              height: 80,
              color: Colors.blue,
              child: Text("cba", style: TextStyle(fontSize: 12))
          ),
          Container(
              width: 50,
              height: 120,
              color: Colors.orange,
              child: Text("text", style: TextStyle(fontSize: 40))
          )
        ],
      ),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwJWLSgW-1584343733252)(DCFBE9A157A14374B312C4A6648A7E31)]

CrossAxisAlignment.baseline: 基线对齐

• 我们首先要理解一下什么是基线

基线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w84LWHNo-1584343733253)(6C5EF1C8B9A740C9B1B5ED68DEE6B0A8)]

顶线到底线的距离就是**line-height **行高

行高是等于顶线 - 底线的距离的

• line-height一般大于文字高度

一般文字刚好在顶线到底线的行高的中间 line-height - textheight/2 上下的行高

vertical-align

文字下沉 x这个单词交叉点不会再中线因为 文字下沉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qAdXgX8A-1584343733258)(54FA9FEDD16D4B0DAC5D9C022F83E875)]

其实这里有两个基线粉色和蓝色都是 基线而且可以设置可以通过textBaseline来设置

CrossAxisAlignment.baseline

如果我们想要设置基线对齐那么就一定要设置基线 这里它可能没有设置默认值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XaZfgGst-1584343733262)(F8DCAE30FC8D4557864874F77599ABEA)]

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange
        )
      ],
    );
  }
}

但是我们发现它并没有 和start有什么不同

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qx46bB9Q-1584343733264)(1E56655472EA41A1BF03625389E9A88E)]

因为基线对齐是基于文字的，所以必须有文本的时候才有效果‘

然后我们加上文字

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red,
            child: Text("text", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text("world", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 20))
        )
      ],
    );
  }
}

结果是一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QU76fRIF-1584343733266)(EC25AC58C4FA4D299CB35D9E017B15FE)]

这是因为我们使用的字体是一样的所以它对齐还是一样的

这个时候我们改一下字体就可以看出不同了

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red,
            child: Text("text", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text("world", style: TextStyle(fontSize: 30))
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4HcHJ2jT-1584343733267)(0976B4282F2648E1B0E571FA330D5FF6)]

对于最大的基线在下面所以所有的基线都下移

然后我们就只有一个verticalDirection没有讲了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t2zftuVs-1584343733269)(F8C469F0E1A0435082E4AF8541060537)]

这个verticalDirection对于Row是没有什么效果的 它是用在Column上的 用于文字排序是正向还是反向的

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      verticalDirection: VerticalDirection.up,
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red,
            child: Text("text", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text("world", style: TextStyle(fontSize: 30))
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nGCRlUQa-1584343733271)(5543A11CAE47490F9423589CB5EF0E91)]

也就是说这个东西只有在Column才有效果

Column

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red,
            child: Text("text", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text("world", style: TextStyle(fontSize: 30))
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z9nhu6RY-1584343733273)(FFEF6C217E344700860957714F029DCB)]

mainAxisAlignment: MainAxisAlignment.start：默认值

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red,
            child: Text("text", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text("world", style: TextStyle(fontSize: 30))
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qvOyuXbO-1584343733276)(16705777CD634E04A9CA44EC24E342AF)]

mainAxisAlignment: MainAxisAlignment.end

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7klGM46S-1584343733277)(2FA99F8DF5084F3ABD43AFA506C35DBF)]

mainAxisAlignment: MainAxisAlignment.center

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SM9nWBBe-1584343733278)(AF5174466078400C9C1756BC2730DD6A)]

mainAxisAlignment: MainAxisAlignment.spaceBetween

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7JjKaaU9-1584343733280)(1257D22F2257461183CBD10432BFEEC0)]

MainAxisAlignment.spaceAround:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZfRmXSs-1584343733282)(BDE3DE8129FD4CDE8F6FFC2FD7BCAE22)]

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FNZcFEXz-1584343733283)(E20DDA0255E94F358710343075860787)]

其他和正常的就没有什么差别

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      verticalDirection: VerticalDirection.down,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red,
            child: Text("text", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text("world", style: TextStyle(fontSize: 30))
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2CDdLagu-1584343733284)(60DA264A16BE4FBAB878B7BAB58E8E78)]

crossAxisAlignment: CrossAxisAlignment.stretch,

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      textBaseline: TextBaseline.alphabetic,
      verticalDirection: VerticalDirection.down,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
            width: 80,
            height: 60,
            color: Colors.red,
            child: Text("text", style: TextStyle(fontSize: 20))
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text("world", style: TextStyle(fontSize: 30))
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UMcUVOiI-1584343733286)(937C0A896DAC4DB69C21356FE3414037)]

Flexible

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2YpuJAGt-1584343733287)(2889E7A50290413699EECEE412968D4D)]

我们现在想做一件事 就是把这个剩余的东西放到一个元素上面

我们可以使用Flexible组件

并且设置它的fit: FlexFit.tight, 如果不设置它就默认是loose tight是动态的意思

不设置就和没有这个Flexible差不多

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      verticalDirection: VerticalDirection.up,
      mainAxisSize: MainAxisSize.max,
      children: [
        Flexible(
          fit: FlexFit.tight,
          child: Container(
              width: 80,
              height: 60,
              color: Colors.red,
              child: Text("text", style: TextStyle(fontSize: 20))
          ),
        ),
        Container(
            width: 120,
            height: 100,
            color: Colors.green,
            child: Text("world", style: TextStyle(fontSize: 30))
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

如果只有一个Flexible就把所有所有的剩余空间分给了它

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sa1BhRoF-1584343733291)(D04AEF8C7F884E5FAF4DF003DCE8C767)]

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      verticalDirection: VerticalDirection.up,
      mainAxisSize: MainAxisSize.max,
      children: [
        Flexible(
          fit: FlexFit.tight,
          child: Container(
              width: 80,
              height: 60,
              color: Colors.red,
              child: Text("text", style: TextStyle(fontSize: 20))
          ),
        ),
        Flexible(
          fit: FlexFit.tight,
          child: Container(
              width: 120,
              height: 100,
              color: Colors.green,
              child: Text("world", style: TextStyle(fontSize: 30))
          ),
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

如果有两个就平分了大概

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IrpAdrpd-1584343733292)(92C7B91C42DB4E548C1ECB1D8C3DBC09)]

我们可以控制这个分配的过程吗 答案是可以的

我们使用flex属性就可以控制 这个地方和css不一样这个flex只是按flex设置的比例计算

之和flex有关 和宽度高度都没有关系(css中这个有一个公式非常麻烦) 但是这里简化了之和flex之比有关

假如一个比第二个是 2:1 那么他们的长度之比也是 2:1

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      verticalDirection: VerticalDirection.up,
      mainAxisSize: MainAxisSize.max,
      children: [
        Flexible(
          fit: FlexFit.tight,
          flex: 2,
          child: Container(
              width: 80,
              height: 60,
              color: Colors.red,
              child: Text("text", style: TextStyle(fontSize: 20))
          ),
        ),
        Flexible(
          flex: 1,
          fit: FlexFit.tight,
          child: Container(
              width: 120,
              height: 100,
              color: Colors.green,
              child: Text("world", style: TextStyle(fontSize: 30))
          ),
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xyOa8iRj-1584343733296)(74FA22078DFB476F8338E9FD6C31B7C9)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fnsoFdRU-1584343733297)(95E9C7B5F12249FFB5A7919008C7BABB)]

但是平常我们都不用这个Flexible

我们会使用Expanded 这个帮我们少了一个fit： FlexFit.tight 的写法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ft49wJQP-1584343733299)(FBA6928D37E34C3AB583F56503A8D71B)]

所以我们就可以这样写

class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      verticalDirection: VerticalDirection.up,
      mainAxisSize: MainAxisSize.max,
      children: [
        Expanded(
          flex: 2,
          child: Container(
              width: 80,
              height: 60,
              color: Colors.red,
              child: Text("text", style: TextStyle(fontSize: 20))
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
              width: 120,
              height: 100,
              color: Colors.green,
              child: Text("world", style: TextStyle(fontSize: 30))
          ),
        ),
        Container(
            width: 90,
            height: 80,
            color: Colors.blue,
            child: Text("cba", style: TextStyle(fontSize: 12))
        ),
        Container(
            width: 50,
            height: 120,
            color: Colors.orange,
            child: Text("text", style: TextStyle(fontSize: 40))
        )
      ],
    );
  }
}

结果是一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j5I5Oz34-1584343733301)(2E2D5A0AE62B4193B31517AFCA29E46C)]

Stack定位的使用

这个Stack主要是一个定位的作用 开发的时候我们可能需要将元素层叠

这个时候就需要这个Stack来做一个层叠的效果

我们可以使用 Positioned left: 0, right: 0, 也可以使用下面这种设置width为double.infinity

• 注意这个东西没有z-index 所以如果需要顺序的话 它就依靠这个Stack 里面children的顺序来完成了

/**
 * Stack默认大小是包裹内容的
 *  - alignment: 从什么位置开始排布所有的子Widget
 *  - fit: expand 将子元素拉伸到尽可能的大
 *  - overflow: 超出部分如何处理 默认值裁剪
 */
class _HYHomeContentState extends State {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset("assets/images/test.jpg", width: double.infinity, fit: BoxFit.cover),
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 8),
            width: double.infinity,
            color: Color.fromARGB(100, 0, 0, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("test", style: TextStyle(fontSize: 20, color: Colors.white)),
                IconButton(
                  icon: Icon(Icons.favorite),
                  color: Colors.white,
                  onPressed: () {
                    print("点击了按钮");
                  },
                )

              ],
            ),
          ),
        )
      ],
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oVutsKZd-1584343733308)(D665C45B53E344DEAD218DECCD0CD7E3)]