在Flutter中连续对齐窗口小部件时遇到问题

Question

我有2个文本字段和一行按钮。我想使用MainAxisAlignment.spaceAround对齐它们。这是我的代码

Widget _headerRow(BuildContext context) {
final fixturesListProvider = Provider.of<FixturesListProvider>(context);
return Container(
  child: Row( // <- this is the row I want aling
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      _weekNumberField(fixturesListProvider),
      _leagueField(fixturesListProvider),
      _getFixturesButton(fixturesListProvider, context)
    ],
  ),
);
}

这是结果

我已经注意到，无论我将小部件以何种对齐方式放置，它们在屏幕上首尾相连，它们之间没有空格，即使我的手机处于横向状态也是如此。

这是小部件。

按钮

RaisedButton _getFixturesButton(
  FixturesListProvider fixturesListProvider, BuildContext context) {
return new RaisedButton(
    color: Theme.of(context).accentColor,
    textColor: Colors.white,
    child: new Text("Fixtures"),
    onPressed: () => Scaffold.of(context)
        .showSnackBar(_showSnackBar(fixturesListProvider.getWeekNumber())));
}

周数文本字段：

 Widget _weekNumberField(FixturesListProvider fixturesListProvider) {
return Flexible(
  child: TextField(
    onChanged: (text) => fixturesListProvider.setWeekNumber(text),
    keyboardType: TextInputType.number,
    decoration:
        InputDecoration(labelText: "Week Number"),

  ),
);

}

最后是联赛文本字段：

Widget _leagueField(FixturesListProvider fixturesListProvider) {
return Flexible(
  child: TextField(
    onChanged: (text) => fixturesListProvider.setLeague(text),
    keyboardType: TextInputType.text,
    decoration:
        InputDecoration( labelText: "League"),
  ),
);

}

如何使用MainAxisAlignment来将小部件连续对齐？

Answer 1

您的窗口小部件占用所有可用的宽度空间。像这样在它们之间放置一些空间：

Widget _headerRow(BuildContext context) {
final fixturesListProvider = Provider.of<FixturesListProvider>(context);
return Container(
  child: Row( // <- this is the row I want aling
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      SizedBox(width: 24),
      _weekNumberField(fixturesListProvider),
      SizedBox(width: 24),
      _leagueField(fixturesListProvider),
      SizedBox(width: 24),
      _getFixturesButton(fixturesListProvider, context)
      SizedBox(width: 24),
    ],
  ),
);
}

或者如果您不想指定宽度：

Widget _headerRow(BuildContext context) {
final fixturesListProvider = Provider.of<FixturesListProvider>(context);
return Container(
  child: Row( // <- this is the row I want aling
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      Flexible(flex: 1, child: SizedBox()),
      Flexible(flex: 3, child: _weekNumberField(fixturesListProvider)),
      Flexible(flex: 1, child: SizedBox()),
      Flexible(flex: 3, child: _leagueField(fixturesListProvider),
      Flexible(flex: 1, child: SizedBox()),
      Flexible(flex: 3, child: _getFixturesButton(fixturesListProvider, context)),
      Flexible(flex: 1, child: SizedBox()),
    ],
  ),
);
}

请不要忘记从返回Flexible的方法中删除TextField。