之间的空间不起作用，我做错了什么吗？答案

【问题标题】：Space between is not working, did i do something wrong?之间的空间不起作用，我做错了什么吗？
【发布时间】：2019-09-01 17:20:41
【问题描述】：

应用迁移图片https://lh3.googleusercontent.com/sTFx8QfUzgnrT69cK54V9igmCd04GLIlTmrwAC01GISRDsbGNL9KZeXNnKeILHdNUQ=w1853-h942

我在做什么

class ScheduleListItem extends StatelessWidget {
  ScheduleListItem({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
                color: Colors.black26, offset: Offset(0, 5), blurRadius: 5)
          ]),
      margin: EdgeInsets.all(7),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Container(
            width: 15,
            decoration: BoxDecoration(
                color: Colors.red,
                borderRadius:
                    BorderRadius.horizontal(left: Radius.circular(10))),
          ),
          Column(

            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween ,
                children: <Widget>[Text("Data"), Text("Data")],
              ),
              Row(
                children: <Widget>[Text("Data"), Text("Data")],
              ),
              Row(
                children: <Widget>[Text("Data"), Text("Data")],
              )
            ],
          )
        ],
      ),
    );
  }
}

【问题讨论】：

查看这个以更好地理解这个概念 - medium.com/flutter-community/…

标签： flutter dart flutter-layout

【解决方案1】：

您需要将Column 包装在Expanded 中，然后您可以使用Spacer 属性，它会占用剩余空间。

Expanded(
  child: Column(
    children: <Widget>[
      Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")]),
      Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")]),
      Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")])
    ],
  ),
)

如果Row/Column 中有多个Spacer，您还可以在Spacer 中使用flex 来告诉您想如何划分剩余区域的占用率

【讨论】：

【解决方案2】：

我假设您希望将两个 Text 小部件分开放置在一行中。如果是这样，您的列不会占用整个水平空间。您可以像这样简单地将其包装到 Expanded 小部件中：

Expanded(
  child: Column(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[Text("Data"), Text("Data")],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[Text("Data"), Text("Data")],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[Text("Data"), Text("Data")],
      )
    ],
  ),
)

这将产生这个输出：

【讨论】：