Question

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

这是我的代码：

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

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

1 个答案: