如何在行项目之间设置修复 space

Question

我有一个行，其中包含一个小图像，后跟一个文本。我正在尝试在这 2 个小部件之间设置 a 修复 space（目前它们一个接一个地卡住）。这应该很简单，但我不知道一个好的方法...

这是我的代码：

  Widget displayRow(String imageName, String text, TextStyle textStyle) {
    Widget widget = Container(
      margin: const EdgeInsets.symmetric(vertical: 8.0),
      color: Colors.green,
      child: Row (
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Image.asset(
              "images/${imageName}",
              width: 32.0,
              height: 32.0,
              alignment: Alignment.center,
              fit: BoxFit.scaleDown
          ),

          Text(text, style: textStyle),
        ],
      ),

      height: 120.0,
    );

    return widget;
  }

我将这段代码放在一个函数中，因为我打算多次使用它来以相同的模式（图像 + 文本）显示不同的行。

感谢帮助

Answer 1

您可以使用 Container 相对较小的 width:

     Widget displayRow(String imageName, String text, TextStyle textStyle) {
  Widget widget = Container(
  margin: const EdgeInsets.symmetric(vertical: 8.0),
  color: Colors.green,
  child: Row (
    mainAxisAlignment: MainAxisAlignment.start,
    children: <Widget>[
      Image.asset(
          "images/${imageName}",
          width: 32.0,
          height: 32.0,
          alignment: Alignment.center,
          fit: BoxFit.scaleDown
      ),

      Container(width: 10.0), // You can adjust it to suit your design

      Text(text, style: textStyle),
    ],
  ),

    height: 120.0,
  );

  return widget;
}

您还可以选择将 Image 小部件包装在 Container 中并赋予它一定的 padding :

  Container(
   padding: EdgeInsets.all(15.0),
   child: Image.asset(
          "images/${imageName}",
          width: 32.0,
          height: 32.0,
          alignment: Alignment.center,
          fit: BoxFit.scaleDown
      ),
  ),

如何在行项目之间设置修复 space

How to set a fix space between Row items

flutter

flutter-layout