Flutter 卡列表平铺图片文字

Question

我对 flutter 应用程序的小部件有点新，我试图在卡上做一个设计，这是不可能的，希望你能帮助我。

这是我的卡片小部件（我使用列表视图）。

Widget _cardSermon(BuildContext context, Data data) {
return Card(
  elevation: 3,
  margin: EdgeInsets.symmetric(vertical: 7), 
  child: ListTile(
    dense: true,
    leading: data.image != null ? Image.network("https://docs.google.com/uc?export=view&id="+data.image, height: 250, fit: BoxFit.fill) : Image.asset("assets/images/700_x_350.jpg"),
    title: new Text(
      data.title,
      style: new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
    ),
    subtitle: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Text(data.location,
              style: new TextStyle(
                  fontSize: 14.0, fontWeight: FontWeight.normal)),
          new Text('Population: ${data.date}',
              style: new TextStyle(
                  fontSize: 12.0, fontWeight: FontWeight.normal)),
        ]),
    onTap: () {
      print("taped");
    },
  )
);

所以这是我的结果：

还不错，但这不是我所期望的，例如，我在我不想要的图像上获得边距，并且无法在标题和 textx 之间添加边距。

这是我真正想要的：

真的希望你能帮助我，或者给一些近似的设计，太难了，我找不到足够的帮助，谢谢大家。

Answer 1

要实现您想要的，您应该将ListTile更改为“自定义”布局Container ，其中Row in a Card 。

您可以使用它来帮助您入门：

        Container(
          height: 150,
          child: Card(
            color: Colors.orange,
            child: Row(
              children: [
                Expanded(
                  flex: 33,
                  child: Image.network(
                    'https://picsum.photos/250?image=9',
                  ),
                ),
                Expanded(
                  flex: 66,
                  child: Column(
                    children: [
                      Expanded(
                        flex: 50,
                        child: Center(child: Text('abc')),
                      ),
                      Expanded(flex: 25, child: Text('def')),
                      Expanded(flex: 25, child: Text('ghi')),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),

Answer 2

我不认为您可以完全控制瓷砖。
您可以在此解决方案中添加尺寸。

GestureDetector(
            child: Card(
              elevation: 3,
              color: Colors.black38,
              child: Row(
                children: [
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.33,
                    child: Image.asset(
                      "assets/images/banane.jpg",
                      fit: BoxFit.fill,
                    ),
                  ),
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "title",
                          style: new TextStyle(
                              fontSize: 15.0, fontWeight: FontWeight.bold),
                        ),
                        new Text(
                          "location",
                          style: new TextStyle(
                            fontSize: 14.0,
                            fontWeight: FontWeight.normal,
                          ),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              'Population: ${22 / 06 / 2020}',
                              style: TextStyle(
                                fontSize: 12.0,
                                fontWeight: FontWeight.normal,
                              ),
                            ),
                            Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 8.0),
                              child: Icon(Icons.data_usage),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            onTap: () {},
          ),