颤振：小部件之间的间距而不是边距

Question

我想将第二张个人资料图片（图形上的nr2）留在卡的右侧而不使用边距，因为第一个“测试”的长度可以不同，并且当它显示时，它不会渲染，因为个人资料图片卡无法触及。我也想在它旁边设置“ 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。使用扩展将图像向右移动

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(
  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

中进行检查