Как ограничить ListView во Flutter на основе высоты области просмотра

Question

Я пытаюсь ограничить ListView на основе высоты окна просмотра, чтобы он прокручивался, если в нем есть больше элементов, но я не нашел способа успешно сделать это, не указав фиксированный номер в SizedBox.

Макет выглядит следующим образом:

- SingleChildScrollView
       - SizedBox (height equal to MediaQuery.of(context).size.height)
               - Column
                   - Text
                     - TextField
                         - SizedBox (because I found no other way)
                              - ListView

Здесь следует отметить следующее: я не хочу, чтобы список прокручивался вдоль остальной части представления, а оставался сам по себе, оставляя текстовое поле всегда в поле зрения.

Answer 1

Для прокрутки всего экрана, когда данные превышают высоту устройства, вам необходимо использовать виджет SingleChildScrollView, который прокручивается, когда данные превышаются с высоты устройства. Я создал его пример, в котором я использовал MediaQuery для правильного размера виджета. Пожалуйста, проверьте приведенное ниже решение и дайте мне знать в случае возникновения проблем.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return _buildPage();
  }

  Widget _buildPage() {
    return SafeArea(
      top: true,
      child: Scaffold(
        body: SingleChildScrollView (

            child: ConstrainedBox(
              constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    margin: const EdgeInsets.only(top: 20.0),
                    height: MediaQuery
                        .of(context)
                        .size
                        .height * 0.2,
                    child: Align(
                      alignment: Alignment.center,
                      child: Text("Ravindra Kushwaha", style: TextStyle(
                          fontSize: 20.0
                      ),),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(4.0),
                    child: TextField(

                    ),
                  ),

                  Expanded(
                    child: _buildList(),
                  ),
                ],
              ),
            )
        ),
      ),
    );
  }

  Widget _buildList() {
    return ListView(
      children: <Widget>[
        ListTile(
            leading: Icon(Icons.ac_unit),
            title: Text('First'),
            trailing: Icon(Icons.arrow_forward_ios)

        ),
        ListTile(
            leading: Icon(Icons.ac_unit),
            title: Text('Seond'),
            trailing: Icon(Icons.arrow_forward_ios)

        ),
        ListTile(
            leading: Icon(Icons.ac_unit),
            title: Text('Third'),
            trailing: Icon(Icons.arrow_forward_ios)

        ),
      ],
    );
  }
}

И вывод будет быть следующим.