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