flutter row里面的内容居中

效果图:
flutter row里面的内容居中_第1张图片
就是深度睡眠浅度睡眠带着对应的图片显示在中央位置。

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

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

Widget row = new Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        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里的内容平均分布居中。
flutter row里面的内容居中_第2张图片
添加属性:mainAxisSize:MainAxisSize.min,才会达到图一的效果。

你可能感兴趣的:(flutter)