КОДЕКС

Как использовать щепки во флаттере?

Вступление

Виджет - это базовый объект в наборе инструментов пользовательского интерфейса Google Flutter, из которого можно создать любой элемент пользовательского интерфейса. Пользователь взаимодействует с этим виджетом, чтобы выполнить какое-то действие. Например, кнопка - это виджет, и пользователь нажимает кнопку, чтобы создать какое-либо событие на мобильной или веб-платформе.

Интересно, что каждый элемент пользовательского интерфейса во Flutter является виджетом. Виджеты можно легко использовать в любом месте, например в контейнере, тексте, ListView, GridView или SingleChildScrollView. Но есть особый виджет под названием «полоски». У виджетов Sliver есть несколько дополнительных свойств по сравнению с обычными виджетами. Но сколько существует типов Щепок?

Во Flutter есть 7 различных типов щепок:

  1. SliverAppBar
  2. SliverToBoxAdapter
  3. SliverList
  4. SliverFixedExtentList
  5. SliverGrid
  6. SliverGrid.extent
  7. SliverGrid.count

В этом блоге мы рассмотрим различные типы лент и сценарии их использования. Прежде чем мы это сделаем, давайте разберемся, как Slivers работают во Flutter.

Как работают щепки?

Виджеты, которые мы часто используем внутри Scaffold, расширяют абстрактный класс RenderConstrainedBox. Например, Container, ListView, Text и т. Д. Расширяют абстрактный класс RenderConstrainedBox.

Но мы не можем использовать ленты непосредственно в Scaffold. Нам нужно будет добавить CustomScrollView, который может содержать массив осколков. И эти осколки расширяют абстрактный класс RenderSliver.

В Flutter CustomScrollView - это тип scrollView, у которого есть свойство с именем осколки. Он может содержать массив виджетов, расширяющих абстрактный класс RenderSliver.

Эти виджеты обладают некоторыми возможностями, выходящими за рамки возможностей простых виджетов (виджетов, расширяющих RenderConstrainedBox), таких как расширение и сжатие панели приложения, управление эффектом прокрутки, виджет с эффектом прокрутки.

Мы не можем напрямую использовать виджет, расширяющий абстрактный класс RenderConstrainedBox. Если мы напрямую используем виджет в CustomScrollView, появится следующая ошибка:

Это четко указано в строке 4 журнала ошибок:

RenderViewPort ожидал дочернего типа RenderSliver, но получил дочерний элемент типа RenderContraintBox.

Этот журнал ошибок указывает, что CustomScrollView не может содержать виджет, расширяющий RenderContraintBox. Но он будет содержать виджет, расширяющий RenderSliver.

Let’s create a screen with CustomScrollView:
  import 'package:flutter/material.dart';
 
 void main() => runApp(CustomScrollViewScreen());
 
 class CustomScrollViewScreen extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
             title: 'CustomScrollView by DLT Labs',
             home: Scaffold(
             body: CustomScrollView(
             slivers: <Widget>[
               // Add your slivers here...
              ],
            ),
          ),
        );
    }
 }

›› Как вы используете SliverAppBar во Flutter?

Scaffold имеет панель приложения фиксированной высоты, но SliverAppBar может быть добавлен внутри массива лент в CustomScrollView и имеет все свойства, которые присутствуют в AppBar. Кроме того, он также содержит дополнительные свойства динамической высоты и некоторого эффекта прокрутки. Это позволяет нам увеличивать или уменьшать высоту SliverAppBar при прокрутке.

SilverAppBar имеет свойство с именем pinned, , которое является логическим типом. Если мы не хотим расширять или сжимать с помощью прокрутки, мы можем установить это значение на false. В зависимости от жеста ввода SliverAppBar может прокручиваться вверх или вниз со всеми фрагментами.

Есть и другие свойства, такие как extendedHeight и collapsedHeight, для управления высотой. SliverAppBar при прокрутке.

slivers: [
  SliverAppBar(
   title: Text('Sliver dynamic Grid view'),
   pinned: true,
   expandedHeight: 200,
  ),
]

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

›› Как вы используете SliverToBoxAdapter во Flutter?

Все виджеты Sliver помещаются в CustomScrollView для создания специальных эффектов прокрутки. SliverToBoxAdapter также является виджетом ленты, но он действует как мост между CustomScrollView и простыми виджетами ящиков.

Например, SizedBox - это простой виджет в виде окна, который нельзя добавить непосредственно в CustomScrollView. А вот и SliverToBoxAdapter, который представляет собой полосатый виджет, который может содержать виджеты прямоугольного типа.

slivers: <Widget>[
   SliverToBoxAdapter(
      child: SizedBox(
                height: 1000,
                child: Center(
                         child: Text('DLT Labs'),
                              ),
                        ),
                   ),
   ],

›› Как использовать SliverList во Flutter?

В CustomScrollView, когда вы хотите отобразить список элементов, которые можно прокручивать по вертикали, используется SliverList. У него есть свойство с именем delegate, которое принимает SliverChildBuilderDelegate. SliverList особенно используется, когда количество элементов в списке неизвестно - например, в случаях, когда вам нужно отобразить список, содержащий ответы от серверного API.

SliverChildBuilderDelegate имеет свойство childCount целочисленного типа type, которое принимает длину массива. Это работает аналогично Listview.builder.

Добавьте этот код внутри класса:

List<Widget> widgetList = <Widget>[];
 String content = '';
 
 Widget rowWidget(String text) {
  return Padding(
         padding: EdgeInsets.all(20),
         child: Text(
                 text,
                 style: Theme.of(context).textTheme.bodyText1,
               ),
      );
 }
 
 List<Widget> listOfText() {
 
   for (int i = 0; i < 100; i++) {
    content = 'Row no. ${i}'.toString();
    widgetList.add(rowWidget(content));
   }
 
   return widgetList;
 }
 
 
   
And this code is part of CustomScrollView:
  slivers: <Widget> [
 SliverList(
    delegate: SliverChildBuilderDelegate(
               (context, index) => listOfText()[index],
                childCount: listOfText().length),
        )
 ]

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

›› Как использовать SliverFixedExtentList во Flutter?

Когда количество элементов, отображаемых в представлении списка CustomScrollView, уже известно, используется SliverFixedExtentList. У него есть свойство с именем delegate, которое принимает значение SliverChildListDelegate . SliverChildListDelegate может содержать другие типы виджетов, например массивы.

Поэтому, если вам нужно показать список виджетов с заранее заданным номером, мы можем добавить все эти виджеты в SliverChildListDelegate. Это эквивалент Listview.

ItemExtent - это свойство, которое сообщает нам высоту виджета внутри SliverChildListDelegate.

slivers: <Widget> [
  SliverFixedExtentList(
            itemExtent: 100,
 
            delegate: SliverChildListDelegate([ //equivalent to Listview
                             Container(color: Colors.red,),
                             Container(color: Colors.green,),
                             Container(color: Colors.blue,)
                      ]),
 
   ),
]

Выполнение приведенного выше кода приводит к следующему результату:

›› Как использовать SliverGrid во Flutter?

В CustomScrollView, если вы хотите отобразить список элементов, которые можно прокручивать по горизонтали, используется SliverGrid. У него есть свойство delegate, которое принимает SliverChildBuilderDelegate. Как и SliverList, SliverGrid также используется, когда количество элементов в списке неизвестно, например, в случаях, когда необходимо отобразить список, содержащий ответы от серверного API.

SliverChildBuilderDelegate имеет свойство childCount целочисленного типа, которое принимает длину массива. Это эквивалент Gridview.builder.

Код ниже показывает нам, как это выглядит за кулисами:

slivers: <Widget>[ SliverGrid(
   gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
       crossAxisCount: 2,
       mainAxisSpacing: 10,
       crossAxisSpacing: 10,
       childAspectRatio: 2),
       delegate: SliverChildBuilderDelegate(//equivalent to Listview.builder
         (context, index) {
           return Container(
                    height: 100,
                    color: Colors.pink[100 * (index % 9)],
                    child: Text('Pink $index'),
           );
       }, childCount: 17),
  )
]

›› Как использовать SliverGrid.extent во Flutter?

В CustomScrollView, когда количество элементов в списке уже известно и может быть прокручено по горизонтали, используется SliverGrid.extent. У него есть свойство - children -, которое принимает список виджетов . SliverGrid.extent особенно используется, когда количество элементов фиксировано.

В SliverGrid количество виджетов на одном горизонте не фиксировано, а высота виджета определяется свойствами maxCrossAxisExtent и childAspectRatio. Например, если maxCrossAxisExtent равно 100 и childAspectRatio равно 1, то высота виджета будет 100, и если childAspectRatio равно 2, то высота также будет вдвое.

Формула: высота виджета = maxCrossAxisExtent / childAspectRatio.

Вот как выглядит закодированный SliverGrid.extent:

slivers: <Widget> [
SliverGrid.extent(
  maxCrossAxisExtent: 50,
  mainAxisSpacing: 10,
  crossAxisSpacing: 10,
  childAspectRatio: 1,
  children: [
   Container(
     color: Colors.red,
   ),
   Container(
     color: Colors.green,
   ),
   Container(
     color: Colors.blue,
   ),
   Container(
     color: Colors.yellow,
   ),
   Container(
     color: Colors.red,
   ),
   Container(
     color: Colors.green,
   ),
   Container(
     color: Colors.blue,
   ),
   Container(
     color: Colors.yellow,
   )
  ])
]

Вот что генерирует этот код:

›› Как использовать SliverGrid.count во Flutter?

Как и SliverGrid.extent, SliverGrid.count также отображает список по горизонтали, но он отличается от первого в одном: он позволяет нам установить количество виджетов, которые будут отображаться в SliverGrid.count. Как и SliverGrid.extent, у него тоже есть то же свойство - children -, которое принимает список виджетов. SliverGrid.count используется, когда количество элементов фиксированное.

В этом SliverGrid количество виджетов на одном горизонте можно фиксировать, задав свойство crossAxisCount. Предположим, вы хотите иметь только 3 элемента в одном ряду по горизонтали; вы установите crossAxisCount равным 3.

slivers: <Widget>[
SliverGrid.count(
      crossAxisCount: 3,
      crossAxisSpacing: 10,
      childAspectRatio: 1,
      mainAxisSpacing: 30,
 
      children: [
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.yellow,
        ),
        Container(
          color: Colors.blue,
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.yellow,
        ),
        Container(
          color: Colors.blue,
        ),
        Container(
          color: Colors.green,
        )
      ]),
 
 ]

Итак, это некоторые основы осколков во Flutter, о которых должен знать каждый разработчик Flutter.

Удачного кодирования!

Google и Flutter являются товарными знаками Google LLC. DLT Labs является товарным знаком DL Global, Inc.

Автор - Дилшад Хайдари, DLT Labs ™

Об авторе: Дилшад работал над мобильной версией DL Ecosystem ™ и DL Certify ™. Он очень предан своей работе и является сплоченным членом команды. У него есть опыт работы с Flutter для iOS и кросс-платформенным интерфейсом.

Отказ от ответственности: эта статья изначально была опубликована на странице блога DLT Labs:
https://www.dltlabs.com/blog/how-do-you-use-slivers-in-flutter-180301