繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

Flutter和Dart系列七：Column和Row_dart tocolumn

作者：繁依Fanyi0 | 2024-03-22 17:37:57

踩

dart tocolumn

对于线性的布局排列，Android中使用的是LinearLayout，至于是横向还是纵向，则是通过orientation属性来指定的，orientation=vertical表示纵向线性，orientation=horizontal表示横向线性。在Flutter中，将这两种线性布局分别用Column和Row来表示。

Column：orientation=vertical


void main(){
    runApp(MaterialApp(
        home: MaterialHome(),
    ));
}
 
class MaterialHome extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("Row_column"),
        ),
        body: Column(
            children: <Widget>[
                Image.asset("images/pic1.jpg"),
                Image.asset("images/pic2.jpg"),
                Image.asset("images/pic3.jpg")
            ],
        ),
    );
  }
}

运行效果如下：

这段代码需要注意下，由于我们使用了asset资源，所以我们在lib的平级目录新建一个images目录，然后将图片放置到这个目录下，如图所示：

最后还需要在.yaml文件中进行相关配置：

现在我想让图片居中，该如何实现？这里就需要用到一个属性：mainAxisAlignment，它的可选值如下：

start
center
end
spaceBetween
spaceEvenly
spaceAround

实现居中，自然而然想到要使用center：


body: Column(
    mainAxisAlignment: MainAxisAlignment.center, 
    children: <Widget>[
        Image.asset("images/pic1.jpg"),
        Image.asset("images/pic2.jpg"),
        Image.asset("images/pic3.jpg")
    ],
),

至于end，就更好理解了：

这三个属性，可以看做是一类，即子Widget之间没有空隙，它们作为一个整体放置到靠上、居中、靠下的不同地方。而space开头的属性值可以看做一个类别，子Widget之间有空隙：


body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween, 
        children: <Widget>[
            Image.asset("images/pic1.jpg"),
            Image.asset("images/pic2.jpg"),
            Image.asset("images/pic3.jpg")
        ],
    ),


body: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly, 
    children: <Widget>[
        Image.asset("images/pic1.jpg"),
        Image.asset("images/pic2.jpg"),
        Image.asset("images/pic3.jpg")
    ],
),


body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround, 
        children: <Widget>[
            Image.asset("images/pic1.jpg"),
            Image.asset("images/pic2.jpg"),
            Image.asset("images/pic3.jpg")
        ],
    ),

我们可以借助于LinearLayout的weight属性来帮助理解：

spaceBetween


<LinearLayout
   orientation="vertical"
   ...>
 
   <ImageView/>
   <View android:layout_weight="1"/>
   <ImageView/>
   <View android:layout_weight="1"/>
   <ImageView/>
</LinearLayout>

spaceEvenly


<LinearLayout
   orientation="vertical"
   ...>
   <View android:layout_weight="1"/>
   <ImageView/>
   <View android:layout_weight="1"/>
   <ImageView/>
   <View android:layout_weight="1"/>
   <ImageView/>
   <View android:layout_weight="1"/>
</LinearLayout>

spaceAround


<LinearLayout
   orientation="vertical"
   ...>
   <View android:layout_weight="1"/>
   <ImageView/>
   <View android:layout_weight="2"/>
   <ImageView/>
   <View android:layout_weight="2"/>
   <ImageView/>
   <View android:layout_weight="1"/>
</LinearLayout>

当然，要想mainAxisAlignment有效，则需要将mainAxisSize指定为MainAxisSize.max(默认值)。对于mainAxisSize属性，它的可选值为：

MainAxisSize.max，表示尽可能多的占据垂直方向的空间,可以类比成match_parent
MainAxisSize.min，表示尽可能少的占据垂直方向的空间，这种情况下，Column的高度等于子Widget的高度，那么mainAxisAlignment属性指定为任何值都不起作用，可以类比成wrap_content

下面介绍Column的另外两个属性： crossAxisAlignment和textDirection

textDirection的可选值为：

TextDirection.ltr:表示水平方向的排列方式为从左到右
TextDirection.rtl:表示水平方向的排列方式为从右到左

crossAxisAlignment，表示子Widget在水平方向上的对齐方式，它的可选值为：

start:ltr时，左对齐；rtl，右对齐
end：ltr时，右对齐；rtl，左对齐
center：居中
stretch：填充
baseline: 暂时我也不清楚用法

看下面的例子：


body: Column(
        mainAxisAlignment: MainAxisAlignment.center,  
        textDirection: TextDirection.ltr,
        crossAxisAlignment: CrossAxisAlignment.start,
 
        children: <Widget>[
            Container(
                decoration: BoxDecoration(color: Colors.red),
                height: 60,
                width: 60,
            ),
            Container(
                decoration: BoxDecoration(color: Colors.yellow),
                height: 60,
                width: 100,
            ),
            Container(
                decoration: BoxDecoration(color: Colors.blue),
                height: 60,
                width: 60,
            )
        ],
    ),

效果图如下：

改为CrossAxisAlignment.end：

改为CrossAxisAlignment.center：

改为CrossAxisAlignment.stretch:

介绍的最后一个属性为verticalDirection，可选值为： - VerticalDirection.down:表示子Widget从上往下排列，默认值 - VerticalDirection.up：表示子Widget从下往上排列，在上例中红色框就会在下面，蓝色跑到了最上面

Expanded

对于Android中的LinearLayout，有一个属性我们不得不提：layout_weight。那么Flutter中有没有类似Widget呢？


body: Column(
   children: <Widget>[
       Container(
          decoration: BoxDecoration(color: Colors.red),
          height: 60,
          width: 60,
       ),
        Expanded(
            flex: 1,
            child: Container(
                decoration: BoxDecoration(color: Colors.yellow),
                width: 100,
            )),
       Container(
           decoration: BoxDecoration(color: Colors.blue),
           height: 60,
           width: 60,
       )
 
   ],
),

没错，就是这个Expanded，运行效果如下：

那么如何指定对应的权重值呢？Expanded中有个属性叫做flex，默认为1，通过它就可以指定相应的权重值。

Row orientation=horizontal

大部分属性的使用都和Column类似，只不过方向不同而已。只有一个地方需要注意：在Column中，crossAxisAlignment的参照物是textDirection，而在Row中 crossAxisAlignment参照物变成了verticalDirection，换句话说就是crossAxisAlignment要和verticalDirection一起使用才能决定子Widget在垂直方向的对齐方式。其他的属性就不再赘述了，大家可以对照Column进行理解。当然，Expanded同样可以在Row中使用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/289819