0

我是一名 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(),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
      ],
    );
  }

这里的输出:

在此处输入图像描述

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

我怎样才能做到这一点?

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

谢谢您的帮助!

4

1 回答 1

1

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

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

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

如何在 Flutter 中拉伸图像以适合整个背景(100% 高度 x 100% 宽度)?

于 2019-08-21T22:26:16.337 回答