flutter学习五布局组件

Flutter Column 垂直布局组件
Flutter Row 水平布局组件
Flutter Paddiing 组件
Flutter Stack 组件
alignment 配置所有子元素的显示位置
Alignment.center/Alignment(-1,1)//最小为-1最大为1
children 子组件
Flutter Stack Align
Stack 组件中结合 Align 组件可以控制每个子元素的显示位置
alignment 配置所有子元素的显示位置
child 子组件
Flutter Stack Positioned
Stack 组件中结合 Positioned 组件也可以控制每个子元素的显示位置
top 子元素距离顶部的距离
bottom 子元素距离底部的距离
left 子元素距离左侧距离
right 子元素距离右侧距离
child 子组件

Container(
      height: 200,
      width: 150,
      color: Colors.red,
      child: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.center,
          child: Text("xx111x"),
        ),        
		Positioned(
          left:30,
          bottom: 40,
          child: Text('ssss'),
        )
      ],
    ),
    );

Flutter AspectRatio 组件
AspectRatio 的作用是根据设置调整子元素 child 的宽高比。
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽
度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。
如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。
aspectRatio 宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值
child 子组件
Flutter Card 组件
Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它看起来有立体感。
margin 外边距
child 子组件
Shape Card 的阴影效果，默认的阴影效果为圆角的长方形边。

ListView(
      children:<Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20/6,
                child: Container(color: Colors.red)
              ),
              ListTile(
                leading: ClipOval(
                  child: Image.network("src")
                ),
                title: Text('title'),
                subtitle: Text('subtitle'),
              )
            ],
          )
        ),
      ]
    );

Flutter RaisedButton 定义一个按钮
Wrap 流布局组件
direction 主轴的方向，默认水平
alignment 主轴的对其方式
spacing 主轴方向上的间距
textDirection 文本方向
verticalDirection 定义了 children 摆放顺序，默认是 down，见 Flex 相关属性介绍。
runAlignment run 的对齐方式。run 可以理解为新的行或者列，如果是水平方向布局的话，run 可以理解为新的一行
runSpacing run 的间距

Wrap(
      spacing: 10,
      children: <Widget>[
        RaisedButton(
          child: Text('第一集'),
          textColor: Colors.blue,
          onPressed: (){},
        )
      ],
    );

flutter学习五 布局组件

猜你喜欢

flutter学习五布局组件