首页 > 解决方案 > 由于 Flutter 中的 Listview.builder 小部件需要高度,因此我给包装小部件的容器提供的一些固定高度会导致溢出

问题描述

代码

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Search Families'),
          centerTitle: true,
        ),
        backgroundColor: StaticEntry.backColor,
        body: Center(
          child: FractionallySizedBox(
            widthFactor: 0.8,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SearchInput(onSubmitHandler: onSubmit),
                SizedBox(
                  height: 300,
                ),
                resultList.isNotEmpty
                    ? Container(                    // <---------------- Container that I am using to wrap the list view widget
                        height: 400,                // <---------------- fixed height I am setting on the container that is wrapped around the ListView widget
                        child: ListView.builder(    // <---------------- ListView widget
                          itemCount: 20,
                          itemBuilder: (context, index) {
                            return Text('Heyyyy!');
                          },
                        ),
                      )
                    : SizedBox()
              ],
            ),
          ),
        ),
      ),
    );
  }

问题

在上面的代码中,正如我使用箭头所指出的那样,我将一个ListView小部件包装在 a 中Container并为其分配一个固定的高度,Container因为ListView小部件默认具有无限的高度。
这种方法的问题是,由于我提供给容器的高度是固定高度,因此布局在视口高度较小的设备上会中断,而在视口高度较大的设备上则可以正常工作。
所以我想弄清楚的是,如何Container在不破坏布局的情况下设置适用于所有设备的高度?(我试图在不使应用程序在较小设备上中断的情况下尽可能地使该高度最大化。)

(在研究这个时,我遇到了这个堆栈溢出链接,根据那个链接,我尝试ListView用一​​个小部件包装小Flexible部件并将小部件的shrinkWrap属性设置ListViewtrue。这不起作用,它导致我ListView的小部件和另一个小部件在它们之间获得尽可能多的空间并将我的ListView小部件推到屏幕底部。)

标签: flutterflutter-layoutflutter-listviewflutter-designflutter-container

解决方案


推荐阅读