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

最新推荐文章于 2022-08-24 08:56:42 发布

jsp13270124

最新推荐文章于 2022-08-24 08:56:42 发布

阅读量515

点赞数

分类专栏： flutter dart dart语法文章标签： flutter

本文链接：https://blog.csdn.net/jsp13270124/article/details/104900304

版权

flutter 同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

dart

7 篇文章 0 订阅

订阅专栏

dart语法

4 篇文章 0 订阅

订阅专栏

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

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<HYHomeContent> {
  @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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      textDirection: TextDirection.rtl,
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: Colors.red,
      child: Row(
        children: <Widget>[
          Icon(Icons.bug_report),
          Text("bug报告")
        ],
      ),
      onPressed: () => print("点击"),
    )
  }
}

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

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

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

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

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

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

class _HYHomeContentState extends State<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      //      textDirection: TextDirection.rtl,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.start,
      //      textDirection: TextDirection.rtl,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        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<HYHomeContent> {
  @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: <Widget>[
          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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      //      textDirection: TextDirection.rtl,
      textBaseline: TextBaseline.ideographic,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        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<HYHomeContent> {
  @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: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      verticalDirection: VerticalDirection.down,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      textBaseline: TextBaseline.alphabetic,
      verticalDirection: VerticalDirection.down,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        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<HYHomeContent> {
  @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: <Widget>[
        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<HYHomeContent> {
  @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: <Widget>[
        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<HYHomeContent> {
  @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: <Widget>[
        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<HYHomeContent> {
  @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: <Widget>[
        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<HYHomeContent> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        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: <Widget>[
                Text("test", style: TextStyle(fontSize: 20, color: Colors.white)),
                IconButton(
                  icon: Icon(Icons.favorite),
                  color: Colors.white,
                  onPressed: () {
                    print("点击了按钮");
                  },
                )

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

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

jsp13270124

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flutter 学习第八天多子组件布局

这个转自我自己的有道云想看图片去那里http://note.youdao.com/noteshare?id=a72c965bf9e1194b2d4873c64479f408&sub=25B1E0477B0B4C3CAF8384F640C2EC2BRow Column Expanded Stack布局组件的使用[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(im...
复制链接

扫一扫