与ListView.builder一起使用的扩展小部件的任何替代方法 [英] Any alternative to Expanded widgets using with ListView.builder

问题描述

我需要设计一个屏幕，根据选择的按钮显示一个不同的窗口小部件(selectedWidget).问题在于内容是动态的，我必须对所有API使用ListView.builder.并且ListView.builder仅在包含listview的行包装在Expanded窗口小部件中时才起作用.我想在ListView的正下方有两个按钮，由于Expanded小部件无法覆盖ListView所在的整个列，因此无法实现.

I need to design a screen that shows a different widget (selectedWidget) depending on which button is selected. Problem is that the content is dynamic and I have to use ListView.builder for all the APIs. And ListView.builder only works when the Row containing listview is wrapped in Expanded widget. I want to have two buttons just below my ListView, which I'm not able to achieve due to the Expanded widget which covers up the entire Column in which the ListView is present.

这是我需要的设计.

代码给出了我一直在使用的基本结构.selectedWidget是ListView.builder小部件，将根据选定的FlatButton对其进行选择.同样，包含selectedWidget的Column具有动态高度.它应该根据列表视图的大小进行调整，因此我无法定义固定的高度甚至maxHeight.我只能在这里给minHeight.ListView下面的两个按钮应该在ListView的正下方，并使用flex 3调整Column的宽度.

The code gives the basic structure which I've been using. selectedWidget is the ListView.builder widget which will be selected according to the FlatButton selected. Also the Column which contains the selectedWidget has dynamic height. It should adjust according to the size of the listview, so I cannot define a fixed height or even a maxHeight. I can only give minHeight here. And the two buttons below my ListView should be right below my ListView and take the width of the Column with flex 3.

我也尝试过禁用ListView的滚动并使用SingleChildScrollView，但是ListView下面的两个按钮也开始滚动，这是我不希望的.我需要它们在屏幕上是静态的，并且只有ListView可以滚动.

I've also tried disabling the scroll for ListView and using SingleChildScrollView, but then my two buttons below the ListView also start scrolling, which I don't want. I need them to be static on the screen and only the ListView should scroll.

我需要上述问题的解决方案.我需要此扩展小部件的解决方法，该方法不能让我在列表视图的正下方对齐按钮，并留出空白.如果没有ListView.builder的替代方案，请分享，因为我认为没有Expanded窗口小部件我无法使用ListView.builder.我已经尝试过使用ListView和Expanded小部件的所有可能结构.

I need a solution for the above problem. I need a workaround for this Expanded widget which doesn't let me align my buttons right below my listview and gives white space. Please share if there is any alternative to ListView.builder because I don't think I can use ListView.builder without the Expanded widget. I've tried every possible structure with ListView and Expanded widget.

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return Column(
    children:[
      Expanded(
          child: Row(
          Expanded(flex: 2,
            child: Column(
                children: [
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                ]
            )
           ),
          Expanded(flex: 3, 
            child: Column(
                children: [
                    Expanded(selectedWidget),
                    Row(children: [FlatButton(), FlatButton()], )
                ]
            )
          ),
      )
      )
    ],);
  }
  
}

推荐答案

也许您可以使用 Flexible 并在ListView中设置 shrinkWrap:true .之后，以下两个按钮可能不需要 Expand 小部件.

Maybe you can use Flexible and set shrinkWrap: true, inside ListView. The following 2 buttons may not need Expand widget after that.

child: Column(
  children: [
    Flexible(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) => Text(index.toString()),
        itemCount: 6,
      ),
    ),
    Row(
      ... // 2 Buttons

这篇关于与ListView.builder一起使用的扩展小部件的任何替代方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！