Question

我是一名Android开发人员，我正在尝试开发一个非常简单的应用程序以发现Flutter。

我想创建一个包含非常简单单元格的列表。带有以下内容的卡：

左侧为固定宽度的图像。高度应与父容器匹配；
在右侧是垂直堆叠的一些文本字段。

我可以正确对齐窗口小部件，但是图像无法将height属性设置为“ match parent”。

这是我当前的树：

Widget _buildTabBarView({@required List<AttractionCategory> categories})
  {
    return TabBarView(
      children: <Widget>[
        for(var category in categories)
          Container(
            child: ListView.builder(
              padding: EdgeInsets.all(8),
              itemCount: category.attractions.length,
              itemBuilder: (context, index)
              {
                return Card(
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(right: 8),
                        child: Image(
                          fit: BoxFit.fill,
                          width: 125,
                          image: AssetImage(category.attractions[index].photo),
                        ),
                      ),
                      Expanded(
                        child: Column(
                          children: <Widget>[
                            Padding(
                              padding: EdgeInsets.only(bottom: 8, top: 8, right: 8),
                              child: Align(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  category.attractions[index].name,
                                  style: Theme.of(context).textTheme.title,
                                ),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(right: 8, bottom: 8),
                              child: Align(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  category.attractions[index].description,
                                  style: Theme.of(context).textTheme.body1,
                                ),
                              ),
                            ),
                            (category.attractions[index].size != null) ? Padding(
                              padding: EdgeInsets.only(right: 8, bottom: 8),
                              child: Align(
                                alignment: Alignment.topLeft,
                                child: Row(
                                  children: <Widget>[
                                    Padding(
                                      padding: EdgeInsets.only(right: 8),
                                      child: Icon(
                                        Icons.accessibility_new,
                                        size: 16,
                                      ),
                                    ),
                                    Text(
                                      category.attractions[index].size,
                                      style: Theme.of(context).textTheme.body1.copyWith(color: Color.fromARGB(255, 57, 180, 54)),
                                    ),
                                  ],
                                ),
                              ),
                            ) : Container(),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
      ],
    );
  }

这里是输出：

如您所见，图像的高度与父图像不匹配。

我该如何实现？

如果我的情况糟透了，请毫不犹豫地给我建议一棵新树！

谢谢您的帮助！

Answer 1

用以下内容替换您的图片（包括周围的填充）：

                Container(
              width: 125.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("myphoto"),
                fit: BoxFit.fill),
              ),
            ),

请参考此处，只是Google的第一个结果：

How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter?

图片小部件：高度与父级不匹配

1 个答案: