Question

我在正确设置布局时遇到问题... ListView中需要一个稍微高级的项目。

如果您看到以下屏幕截图：

我的目的是使背景图像（堆栈中的最低/第一项）伸展并填充整个高度，顶部的蓝色位于底部，并带有少量填充，以便将其抬起一点从底部开始。

在阅读有关堆栈的文章时，我认为所有堆栈项目都将达到最大堆栈项目的高度，因此我想像我们会看到红色的Container也会填满底部，并且一切都应该起作用，但事实并非如此。当然，如果我的商品具有固定的高度，我可以使所有这些正常工作，但事实并非如此。

我如何才能使某件物品占据堆叠物品中的全部高度，使其与最大高度匹配？

这是代码。首先是所有内容的入口点（ListView）：

Widget _listView(BuildContext context, MyLoanOverview loanOverview) {
    return ListView.builder(
        padding: const EdgeInsets.all(16),
        itemCount: loanOverview.houses.length,
        itemBuilder: (BuildContext context, int index) {
          return _houseCard(context, loanOverview.houses[index]);
        });
  }

  Widget _houseCard(BuildContext context, House house) {
    GlobalKey _key = GlobalKey();
    return Container(
      key: _key,
      child: InkWell(
        onTap: () => _cardTap(_key, context, house),
        child: HouseCard(house: house),
      ),
    );
  }

HouseCard小部件（对不起，拆分，部件被重复使用或将一直存在）：

class HouseCard extends StatefulWidget {
  final House house;

  const HouseCard({Key key, this.house}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CardState();
}

class _CardState extends State<HouseCard> {
  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16.0),
      ),
      semanticContainer: true,
      clipBehavior: Clip.antiAliasWithSaveLayer,
      child: HouseCardContent(house: widget.house, isFullscreen: false),
      elevation: 4,
    );
  }
}

然后是最后一个，即大的：

class HouseCardContent extends StatefulWidget {
  final House house;
  final bool isFullscreen;

  const HouseCardContent({Key key, this.house, this.isFullscreen}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _CardState();
}

class _CardState extends State<HouseCardContent> {
  void _onOpenClosePressed() {
    di<EventBus>().fire(FullScreenCardEvent(null, null, null, null, false));
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Stack(
        children: <Widget>[
          ImageHelper.getHouseCategoryImage(widget.house.houseCategory),
          Container(
            color: Colors.red,
            child: Padding(
              padding: const EdgeInsets.only(bottom:10.0),
              child: Align(
                alignment: Alignment.bottomLeft,
                child: Container(
                  color: Colors.blue,
                  height: 20,
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(12, 8, 12, 8),
            child: Align(
              alignment: Alignment.topLeft,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Text(
                          widget.house.addressStreet,
                          style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold, color: Colors.white),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: IconButton(icon: Image.asset(widget.isFullscreen ? 'assets/images/button_collapse.png' : 'assets/images/button_expand.png'), onPressed: widget.isFullscreen ? () => _onOpenClosePressed() : null),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 56,
                  ),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Text(
                          'Boligværdi',
                          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight,
                        child: Text(
                          '4.233.123',
                          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
                        ),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 32,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(
                      height: 60,
                      decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(
                      height: 60,
                      decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(
                      height: 60,
                      decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(
                      height: 60,
                      decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(
                      height: 60,
                      decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: Container(
                      height: 60,
                      decoration: BoxDecoration(color: Color(0xFFFFFFFF), borderRadius: BorderRadius.circular(10.0)),
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

谢谢
索伦

在ListView项内展开或其他任何flex窗口小部件

0 个答案: