Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

SingleChildScrollView

Делает прокручиваемым одного ребёнка, который не помещается в отведённое место. Подходит для формы или страницы из нескольких блоков, когда список однотипных строк не нужен.

Тип: single-child

SizedBox height:120
  SingleChildScrollView
    Column
      Text "Строка 1"
      Text "Строка 2"
      Text "Строка 3"
      Text "Строка 4"
      Text "Строка 5"
      Text "Строка 6"

Параметры

Параметр	Тип	Default	Описание
`scrollDirection`	string	vertical	Направление: `vertical` , `horizontal`
`reverse`	bool	false	Начинать прокрутку с конца
`physics`	string	always	Реакция на жест: `never` , `bouncing` , `clamp` , `always`
`clipBehavior`	string	hardEdge	Обрезка по границам
`keyboardDismissBehavior`	string	manual	`onDrag` — убирать экранную клавиатуру при протаскивании

Вложенные структуры

`#padding`

Отступ внутри области прокрутки.

SizedBox height:120
  SingleChildScrollView
    #padding all 16
    Column spacing:8
      Text "Абзац 1"
      Text "Абзац 2"
      Text "Абзац 3"
      Text "Абзац 4"

Примеры

Горизонтальная прокрутка ряда

SingleChildScrollView scrollDirection:horizontal
  Row spacing:8
    SizedBox width:200 height:80
      ColoredBox color:#4f46e5
    SizedBox width:200 height:80
      ColoredBox color:#7c3aed
    SizedBox width:200 height:80
      ColoredBox color:#059669

Форма, которая не должна прятаться за клавиатурой

@email:""
@name:""
SingleChildScrollView keyboardDismissBehavior:onDrag
  #padding all 16
  Column spacing:12 crossAxisAlignment:stretch
    TextField value:$name
      #decoration labelText:"Имя"
    TextField value:$email
      #decoration labelText:"Почта"

Различия между приложением и сайтом

scrollDirection , #padding работают. reverse , physics и clipBehavior на сайте не читаются, keyboardDismissBehavior — не имеет смысла (у страницы нет собственной экранной клавиатуры; браузер закрывает свою сам).
Внутри ребёнка по поперечной оси размер равен области прокрутки, а по главной — по содержимому.

Best practices

Длинный однотипный список — не сюда. SingleChildScrollView строит всё содержимое сразу, даже невидимое; для длинных повторяющихся строк берите ListView.builder .
Ставьте SingleChildScrollView внутрь элемента с ограниченным размером ( SizedBox , Expanded ): иначе прокручивать нечего — места и так сколько угодно.
Внутрь SingleChildScrollView не кладите Expanded / Spacer : по главной оси места нет, растягиваться им не из чего.