如何使用 Flutter（Card Widget）进行这种布局？答案

【问题标题】：How to do this layout with Flutter (Card Widget)?如何使用 Flutter（Card Widget）进行这种布局？
【发布时间】：2019-12-10 12:18:53
【问题描述】：

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

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

第 1 行 - 文本

第 2 行 - 按钮

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案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: () {
                                }),
                          ],
                        )
                      ]),
                    ],
                  )
                ],
              ),
            ),
          ),
        )

【讨论】：