Flutter学习Padding、Row、Column、Expanded组件

terry 2年前 (2023-09-23) 阅读数 70 #移动小程序

Padding组件

因为Flutter中有很多Widget，没有❀我们可以使用属性❀ Padding 成分处理容器与其子元素之间的直接分离。功能 mainAxisAlignment

主轴排序方法crossAxisAlignment次要轴❝排序方法子组件子组件

垂直列布局组件

属性描述
`主轴对齐`	`主轴❝排序方法`	`辅助轴♿排序方法sub下属`

Row 和 Column 如果在主轴方向取最大值，layout_width行的相当于线性布局匹配列匹配 LinearLayout layout_height 是 match_parent。

`属性图`

`mainAxisAlignment图解`

当我们讲解mainAxisAlignment❝❝❝主轴和交叉轴时。如果是柱子，则长轴为垂直轴，横轴为水平轴；如果是一行，则长轴为水平轴，横轴为垂直轴。？ : middle：中心显示子项之间“空间 id”之间的空间：空间周围：将空的区域均匀分布，使得孩子之间的空的面积相等，但第一个和最后一个孩子的空的面积是1/2 spaceEvenly ：将空的均分主轴方向面积相等，因此children之间的空白空间相等，包括第一个和最后一个child；

`mainAxisSize插图`

MainAxisSize 有两个值：

 有两个值：  限制布局中可用的最大值：轴方向； 
 min：与max不同，它最小化主轴方向上的可用空间； 
从这里可以看到，这两个属性让人想起我们接触过的Androidmatch_parent♽的样子♽。 这里值得注意的是，如果我们将mainAxisSize设置为min，并且还设置了mainAxisAlignment，效果可能不会出现。 
 主轴方向默认为最大，可设置为最小 
代码如下： 
class WidgetTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: ,
        ),Container(
          width: 100,
          height: 100,
          color: ,
        ),Container(
          width: 100,
          height: 100,
          color: ,
        )
      ],
    );
  }
}
效果如下。从图中可以看出，主轴上并没有我们想象的那样有孔。
 
 关于textDirection和verticalDirection，我们不需要记住谁控制谁在行，谁控制谁在列 
我们只需要记住用于控制水平文本方向。 Direction 位置和排列方向 
 垂直方向 用于控制垂直方向的起始位置和排列方向 
 然后记住 
 MainAxisAlignment（主轴）就是与当前控制方向匹配的轴  CrossAxisAlignment（横轴） 是垂直于当前控件方向的轴 
Expanded 布局 
 你可以把flex和ed布局想象为
 Android 中android:layout_weight在xml属性中从属于或者现在：无弹性，所以扩展所占用的空间不会被占用。如果大于0，则所有Expanded会按照其flex的比例来划分主轴上的所有自由空间
 接下来掌握demo写法：大概的效果是：
 void main() => runApp(WidggetTestApp());

class WidggetTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Row,Column学习'),
        ),
        body: WidgetTest(),
      ),
    );
  }
}

class WidgetTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: (5),
      child: Column(
        children: <Widget>[
          Container(
            height: 200,
            color: ,
          ),
          SizedBox(
            height: 5,
          ),
          Container(
            height: 200,
            child:  Row(
              children: <Widget>[
                Expanded(
                    flex: 2,
                    child: Container(
                      height: 200,
                      child: (""
                        ,fit: ,
                      ),
                    )
                ),
                SizedBox(
                  width: 5,
                  
                ),
                Expanded(
                  flex: 1,
                  child: Column(
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: ('' ,fit: ,) ,
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Expanded(
                        flex: 1,
                        child: ('' ,fit: ,) ,
                      ),

                    ],
                  ) ,
                ),

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