flutter - 图像小部件：高度与父级不匹配

Question

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

我想用非常简单的单元格创建一个列表。一张卡片：

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

我可以正确对齐小部件，但图像无法将高度属性设置为“匹配父级”。

这是我当前的树：

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

这里的输出：

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

我怎样才能做到这一点？

如果我的树很糟糕，请毫不犹豫地向我推荐一棵全新的树！

谢谢您的帮助！

标签： flutterflutter-layoutflutter-image

Answer 1

用以下内容替换您的图像，包括周围的填充：

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

请参考这里，只是谷歌上的第一个结果：

如何在 Flutter 中拉伸图像以适合整个背景（100% 高度 x 100% 宽度）？