flutter row里面的内容居中

最新推荐文章于 2025-05-04 22:56:15 发布

原创最新推荐文章于 2025-05-04 22:56:15 发布 · 2.8w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #row #居中

flutter 专栏收录该内容

27 篇文章

订阅专栏

博客围绕Flutter开发，目标是让深度睡眠和浅度睡眠及对应图片显示在中央位置。初始设置下row居左，需在row里添加属性，使内容平均分布居中以达到预期效果。

效果图：
在这里插入图片描述
就是深度睡眠和浅度睡眠带着对应的图片显示在中央位置。

new Container(
                     alignment: Alignment.topCenter,
                     child: row,),    //row是widget

如此设置，所对应的row居左显示，下面从row里面进行设置。

Widget row = new Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        new SizedBox.fromSize(child: new Icon(Icons.cloud, color: Colors.blueAccent, size: 12.0)),
        Text("深度睡眠"),
        Gaps.hGap15,
        new SizedBox.fromSize(child: new Icon(Icons.cloud, color: Colors.lightBlueAccent, size: 12.0)),
        Text("浅度睡眠"),
      ],
    );

添加属性mainAxisAlignment: MainAxisAlignment.spaceEvenly,row里的内容平均分布居中。
在这里插入图片描述
添加属性：mainAxisSize:MainAxisSize.min,才会达到图一的效果。