如何在行项之间设置修复空间

Question

我有一行包含一个小图像后跟一个文本。我正试图在这两个小部件之间设置一个固定空间（目前它们被一个接一个地卡住）。这应该是简单的事情，但我不知道这样做的好方法......

这是我的代码：

  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
      ),
  ),