Блог

Главная - Вопросы по программированию - Прокрутка в пределах гибкого флаттера

Прокрутка в пределах гибкого флаттера

#flutter #flutter-layout #flutter-animation

#флаттер #flutter-layout #флаттер-анимация

Вопрос:

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

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

Я пытаюсь разместить SingleChildScrollView () внутри Flexible (), чтобы он максимально расширялся.

Я пытаюсь это сделать, но возникает ошибка введите описание изображения здесь

Дизайн такой

Дизайн такой

Комментарии:

1. Обновите мой вопрос с изображением того, что я пытаюсь…

2. Вы пробовали Expanded вместо Flexible? По моему опыту, Flutter очень требователен к типу используемого вами виджета размеров

Ответ №1:

Есть несколько способов сделать это, вы можете сделать это с помощью ListView.builder

 class UiMenu extends StatelessWidget {
  const UiMenu({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.blue,
            ),
          ),
          Expanded(
            flex: 8,
            child: Container(
              child: ListView.builder(
                padding: EdgeInsets.all(0.0),
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) {
                  return Card(
                    margin: EdgeInsets.only(bottom: 2),
                    child: ListTile(
                      leading: Icon(
                        Icons.equalizer_rounded,
                        size: 45,
                      ),
                      title: Text(
                        "Option ${index   1}",
                        style: Theme.of(context).textTheme.headline6,
                      ),
                      trailing: Icon(
                        Icons.chevron_right,
                        size: 45,
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.orange,
            ),
          )
        ],
      ),
    );
  }
}

Результат