Flutter ListView.Builder () в прокручиваемом столбце с другими виджетами

Column не прокручивается, поэтому TextField вверху не прокручивается, а ListView внизу -.

На мой взгляд, лучший способ решить эту проблему - сделать ваш TextField первым элементом в вашем ListView.

Таким образом, столбец вам не понадобится, ваш родительский виджет - это ListView, а его дочерние элементы - это TextField, за которыми следуют остальные элементы, которые вы создаете с помощью _postBuilder.

Размещение ListView внутри виджета Expanded должно решить вашу проблему:

@override
Widget build(BuildContext context) {
return new Column(
  mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new TextField(
            decoration: new InputDecoration(
                hintText: "Type in here!"
            ),
          )
      ),
      new Expanded(child: ListView.builder(
          itemCount: _posts.length, itemBuilder: _postBuilder))
    ],
   );
}

Лучше всего сделать столбец прокручиваемым, сделав столбец дочерним элементом SingleChildScrollView, а затем назначив один и тот же ScrollController как для SingleChildScrollView, так и для ListView.builder. Это сделает текстовое поле и расположенный ниже ListView прокручиваемым.

Причина ошибки:

Column расширяется до максимального размера в направлении главной оси (вертикальной оси), как и ListView.

Решение

Вам необходимо ограничить высоту ListView, чтобы он расширялся, чтобы соответствовать Column. Есть несколько способов решения этой проблемы, я перечисляю некоторые из них:

1. Если вы хотите, чтобы ListView занимал все оставшееся пространство внутри Column, используйте Flexible.

   Column(
     children: <Widget>[
       Flexible(
         child: ListView(...),
       )
     ],
   )
   

2. Если вы хотите ограничить свой ListView определенным height, вы можете использовать SizedBox.

   Column(
     children: <Widget>[
       SizedBox(
         height: 200, // constrain height
         child: ListView(),
       )
     ],
   )
   

3. Если ваш ListView маленький, вы можете попробовать на нем свойство shrinkWrap.

   Column(
     children: <Widget>[
       ListView(
         shrinkWrap: true, // use it
       )
     ],
   )
   

Вот решение:

SingleChildScrollView(
        physics: ScrollPhysics(),
        child: Column(
          children: <Widget>[
             Text('Hey'),
             ListView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount:18,
                itemBuilder: (context,index){
                  return  Text('Some text');
                })
          ],
        ),
      ),

Используйте виджет Расширенный, чтобы ограничить, не переполняя эти пиксели, :)

Column(
  children: <Widget>[
    Expanded(
      child: ListView(),
    ),
    Expanded(
      child: ListView(),
    ),
  ],
)

Просто добавьте физика: NeverScrollableScrollPhysics () в ListView.builder (), чтобы можно было прокручивать

Добавьте physics: NeverScrollableScrollPhysics() в метод Listview.builder(), и вложенный Listview будет прокручиваться

Решение

SingleChildScrollView(
          child: Column(
            children: <Widget>[
                      ListView.builder(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),

Здесь используются два свойства

shrinkWrap: true

занимает только необходимое пространство (он все равно будет прокручиваться, когда будет больше элементов).

physics: NeverScrollableScrollPhysics()

Физика прокрутки, которая не позволяет пользователю прокручивать. Имеется ввиду только работа Column + SingleChildScrollView Scrolling.

В моем случае с будущим я сделал это так:

SingleChildScrollView(
      physics: ScrollPhysics(),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text("Hey ho let's go!"),
          
          Flexible(
            child: FutureBuilder(
              future: getData(),
              builder: (BuildContext context,
                  AsyncSnapshot<List<Sale>> snapshot) {
                

                if (snapshot.connectionState != ConnectionState.done ||
                    snapshot.hasData == null) {
                  
                    return CircularProgressIndicator();

                } else {
                  data = snapshot.data;
                  return ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      itemBuilder: (BuildContext context, int index) {
                        return dataItemWidget(size, data[index], context);
                      },
                      itemCount: data.length,
                    );
                }
              },
            ),
          ),
        ],
      ),
    ),

Используйте физика: NeverScrollableScrollPhysics () и shrinkWrap: true внутри ListView.Builder () и наслаждайтесь

Вот эффективное решение:

class NestedListExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        const SliverToBoxAdapter(
          child: Text('Header'),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (ctx, index) {
              return ListTile(title:Text('Item $index'));
            },
          ),
        ),
      ],
    );
  }
}

Вот предварительный просмотр на дартпаде.

Вы можете использовать SliverToBoxAdapter для других дочерних элементов, поскольку только Slivers могут быть прямыми дочерними элементами CustomScrollView.

Если все элементы списка имеют одинаковую высоту, вы можете использовать SliverFixedExtentList, что более эффективно, потому что высота каждого дочернего элемента не рассчитывается на лету, но вам нужно будет знать точную высоту в пикселях. Вы также можете использовать SliverPrototypeExtentList, где вы указываете первый элемент в списке (прототип), а все остальные дочерние элементы будут использовать высоту прототипа, поэтому вам не нужно знать точную высоту в пикселях.

//If you want Listview.builder inside ListView and want to scroll the parent ListView// //whenever the Items in ListView.builder ends or start you can do it like this
       body: ListView(
                  physics: ScrollPhysics(),
                  children: [
                    SizedBox(height: 20),
                    Container( height: 110.0 *5, // *5 to give size to the container //according to items in the ListView.builder. Otherwise will give hasSize Error
                    child:ListView.builder(
                       physics: NeverScrollableScrollPhysics(),
                       scrollDirection: Axis.vertical,
                       itemCount: 5,
                        itemBuilder: (BuildContext context, int indexChild) {
                         return InkWell(child:Container(height:100));}))                
                    ),]),

1. столбец возврата ( дети: [ Текст («Популярная категория»), Расширенный ( дочерний: ListView.builder (enter code here shrinkWrap: false, scrollDirection: Axis.horizontal, itemCount: 3, itemBuilder: (контекст, индекс) { return Row ( crossAxisAlignment: CrossAxisAlignment.start, дети: [ Текст («привет»), ], ); }),) ],);

просто добавь

Column(
mainAxisSize: MainAxisSize.max, //Add this line onyour column
children:[
    SomeWidget(),
    Expanded(child:ListView.builder())
  ]
)