TextEditingController

Виджет ListView

Виджет ListView представляет прокручиваемый список элементов.

Класс ListView имеет несколько конструкторов с большим количеством параметров, поэтому отметим только некоторые параметры:

• children: объект List<Widget>, который представляет список виджетов, добавляемых в ListView

• scrollDirection: устанавливает направление элементов. Представляет перечисление Axis, которое определяет две константы:

  • Axis.horizontal: устанавливает горизонтальный список - элементы располагаются слева направо (или справо налево)

  • Axis.vertical: устанавливает вертикальный список - элементы располагаются сверху вниз

  Значение по умолчанию - Axis.vertical.

• padding: устанавливает отступы элементов от границ ListView, представляет объект EdgeInsetsGeometry

• reverse: если равен true, располагает элементы в обратном порядке

• physics: задает параметры скроллинга с помощью объекта ScrollPhysics

Определим простейший список:

import 'package:flutter/material.dart';

const double textSize = 22;
void main() {
  runApp(MaterialApp(
      home:  Scaffold(
        body: ListView(
          padding: const EdgeInsets.all(8),
          children:[
            Text("Tom", style: TextStyle(fontSize: textSize)),
            Text("Alice", style: TextStyle(fontSize: textSize)),
            Text("Bob", style: TextStyle(fontSize: textSize)),
            Text("Sam", style: TextStyle(fontSize: textSize)),
            Text("Kate", style: TextStyle(fontSize: textSize)),
          ],
        ),
        appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

В данном случае все элементы ListView представлены виджетом Text:

В реальности это не самый оптимальный способ построения списка, учитывая, что в данном случае меняется только надпись в виджете Text. Но далее мы посмотрим, как можем эту структуру упростить.

По умолчанию создается вертикальный список, где все элементы расположены в столбик. Теперь определим горизонтальный список:

\
import 'package:flutter/material.dart';

const double textSize = 22;

void main() {
  runApp(MaterialApp(
      home:  Scaffold(
        body: ListView(
          padding: const EdgeInsets.all(8),
          scrollDirection: Axis.horizontal,
          children:[
            Text("Tom", style: TextStyle(fontSize: textSize)),
            Text("Alice", style: TextStyle(fontSize: textSize)),
            Text("Bob", style: TextStyle(fontSize: textSize)),
            Text("Sam", style: TextStyle(fontSize: textSize)),
            Text("Kate", style: TextStyle(fontSize: textSize)),
          ],
        ),
        ),
        appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

Для создания горизонтального списка параметру scrollDirection передается значение Axis.horizontal. Однако если мы посмотрим на результат, то мы увидим, что элементы стоят вплотную друг к другу без каких-нибудь отступов.

В этом случае мы можем обернуть виджет Text в какой-то другой виджет, который поддерживает применение отступов:

import 'package:flutter/material.dart';

const double textSize = 22;
const double space = 15;
void main() {
  runApp(MaterialApp(
      home:  Scaffold(
        body: ListView(
          padding: const EdgeInsets.all(8),
          scrollDirection: Axis.horizontal,
          children:[
            Padding(
                child: Text("Tom", style: TextStyle(fontSize: textSize)),
                padding: EdgeInsets.symmetric(horizontal: space),
            ),
            Padding(
              child: Text("Alice", style: TextStyle(fontSize: textSize)),
              padding: EdgeInsets.symmetric(horizontal: space),
            ),
            Padding(
              child: Text("Bob", style: TextStyle(fontSize: textSize)),
              padding: EdgeInsets.symmetric(horizontal: space),
            ),
            Padding(
              child: Text("Sam", style: TextStyle(fontSize: textSize)),
              padding: EdgeInsets.symmetric(horizontal: space),
            ),
            Padding(
              child: Text("Kate", style: TextStyle(fontSize: textSize)),
              padding: EdgeInsets.symmetric(horizontal: space),
            ),
          ],
        ),
        appBar: AppBar(title: Text("METANIT.COM")),)
  ));
}

В данном случае для создания отступов виджет Text обертывается в Padding, который устанавливает равные отступы справа и слева: