flutter - 如何用 Flutter (Card Widget) 做这个布局？

Question

我的问题是:如何在卡片小部件中实现布局作为父小部件？

所以我这样尝试:2 列:1 列用于头像，另一列用于按钮 + 文本。第二列有 2 行。

第 1 行 - 文本

第 2 行 - 按钮

但我没有得到我想要的布局。如何从图片中准确获取布局？

Answer 1

检查这是否适合您，只需调整 BorderRadius.circular(7.0) 的大小以满足您的要求。

Card(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: InkWell(
              onTap: () {
              },
              child: Column(
                //To scale the image to cover the card
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      ClipRRect(
                        borderRadius: new BorderRadius.circular(7.0),
                        child: Image.network("image_url",
                            fit: BoxFit.cover, height: 140.0, width: 150.0),
                      ),
                      new Flexible(
                          child: Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat",
                        textAlign: TextAlign.right,
                        style: TextStyle(
                          fontSize: 16.0,
                        ),
                      )),
                    ],
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Column(children: <Widget>[
                        new Row(
                          children: <Widget>[
                            new IconButton(
                                icon: Icon(
                                  Icons.share,
                                ),
                                onPressed: () {
                                }),
                          ],
                        )
                      ]),
                    ],
                  )
                ],
              ),
            ),
          ),
        )