如何使用Flutter（卡片小工具）进行此布局？

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: () {
                                }),
                          ],
                        )
                      ]),
                    ],
                  )
                ],
              ),
            ),
          ),
        )