Flutter：小部件之间的间距不是边距

Question

我想在不使用边距的情况下将第二张个人资料图片（绘图上的 nr 2）隔开，因为第一个“测试”的长度可能不同，并且当它这样做时它不会呈现，因为个人资料图片卡无法触及。我也想在它旁边设置“2km”。

What I want it to become - IMAGE

我已经尝试了所有主要的交叉对齐方式。

class _mainlistpage extends State<mainlist> {
  @override
  // TODO: implement widget
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: dummyData.length,
        itemBuilder: (context, i) => Card(
            color: Colors.white,
            child: Container(
              width: double.infinity,
              child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,children: <Widget>[
              Row(
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            ClipRRect(
                              borderRadius: BorderRadius.circular(0.0),
                              child: Image.asset(
                                "assets/Profile Picture.png",
                              ),
                            ),
                          ],
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text("Test"),
                                Icon(
                                  Icons.check_circle,
                                  color: Colors.green,
                                  size: 20,
                                ),
                                Text("2km"),

                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Text("Testtt"),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Text("Testtt"),
                              ],
                            )
                          ],
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            ClipRRect(
                              borderRadius: BorderRadius.circular(0.0),
                              child: Image.asset(
                                "assets/Profile Picture.png",
                              ),
                            ),
                          ],
                        )
                      ],
                    )
                  ],
                ),
              ]),
            )));
  }
}

我想在卡片右侧显示第二张个人资料图片，但没有任何效果。我还想要它旁边的“2km”文字。

Answer 1

1。使用 Expanded 将图像向右移动

Row(
  children: [
    Expanded( // Wrap Second Row with Expanded
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Column( ..
          Column( ..
          // Column( .. Move out Last Column that contains Second Image
          ),
        ],
      ),
    ),
    Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        ClipRRect(
          borderRadius: BorderRadius.circular(0.0),
          child: Image.asset(
            "assets/images/flower-2.jpeg",
            width: 50,
            height: 50,
          ),
        ),
      ],
    )
  ],
),

因此，目前我们有新的两个部分。 左右。

将2km放在第二张图片旁边，我们可以重点修改右侧部分

2。将 Column 替换为 Row 以在右侧部分添加更多内容

以前我们有这个：

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
    ClipRRect(
      borderRadius: BorderRadius.circular(0.0),
      child: Image.asset(
        "assets/images/flower-2.jpeg",
        width: 50,
        height: 50,
      ),
    ),
  ],
)

修改成以下几行：

Row( // change Column to Row
  crossAxisAlignment: CrossAxisAlignment.start, // will place 2km on TOP
  children: <Widget>[
    Text("2km"),
    ClipRRect(
      borderRadius: BorderRadius.circular(0.0),
      child: Image.asset(
        "assets/images/flower-2.jpeg",
        width: 50,
        height: 50,
      ),
    ),
  ],
),

完整的工作代码

你可以在这个Github Repo查看它