Л А Б О Р А Т О Р И Я

актуальных

РЕШЕНИЙ


Flutter > Dart > dArtist05.09.2021

Flutter - Использование Timer для периодического изменения текста на странице.

Изложенный материал рассчитан на подготовленных разработчиков, обладающих знаниями ООП (объектно-ориентированного программирования), а также работающих в настроенной среде Flutter и имеющих базовое представление о фреймворке и языке Dart.

Основная задача - вывести на экран текст и менять его через несколько секунд.

Вся информация с кодом и тестом в браузере будет рассматриваться на общем скрине:

full screen

После запуска файла main.dart в центре страницы браузера мы увидим сообщение "Hello World - text#1 !", которое через 3 секунды сменится текстом "Great World - text#2 !", и еще через 3 секунды сменится на текст "Buy World - text#3 !", после этого изменения прекратятся. Для теста сделан вывод в консоль в моменты изменений.

Теперь стоит рассмотреть значимые строки кода файла main.dart:

строка №2 (file: main.dart)

import 'dart:async';

Подключаем библиотеку Dart async, к которой относится требуемая нам функция Timer.

строка №4 (file: main.dart)

void main() {

Запускаем функцию main, которая стартует запуск приложения.

строка №6 (file: main.dart)

debugShowCheckedModeBanner: false,

Отключаем показ баннера DEBUG в правом верхнем углу страницы браузера.

строка №9 (file: main.dart)

body: MyBody())));

Вставляем в тело объекта "Scaffold" объект создаваемого нами класса "MyBody".

строка №12 (file: main.dart)

class MyBody extends StatefulWidget {

Объявление создаваемого нами класса, который объявляется наследником класса "StatefulWidget" - виджет с управляемым состоянием.

строка №13 (file: main.dart)

@override

аннотация @override обозначает, что далее будет переопределяться метод родительского класса.

строка №14 (file: main.dart)

_MyBody createState() => _MyBody();

Создаем состояние нашего виджета "createState" и объявляем, что оно управляется объектом класса "_MyBody". Метод "createState" теперь является переопределенным методом родительского класса.

строка №17 (file: main.dart)

class _MyBody extends State < MyBody > {

Объявляем класс управления состоянием объекта класса "MyBody", на это указывает родительский класс "State < MyBody >".

строка №18 (file: main.dart)

List < String > _items = [

Объявляем список с элементами типа "String", название списка "_items". Список "List" в языке Dart можно сравнить с массивом в других подобных языках программирования.

строка №23 (file: main.dart)

int _index = 0;

Объявляем переменную типа целое, в которой будем хранить индекс элемента из списка, который должен отображаться на странице. Первоначальный элемент, который будет показываться имеет индекс "0" - первый элемент нашего списка.

строка №25 (file: main.dart)

void changeIndex() {

Создаем метод, который будет отвечать за изменение индекса. Метод ничего не возвращает, поэтому имеет тип void.

строка №26 (file: main.dart)

setState(() => _index++);

Вызываем метод объекта "setState", который непосредственно задает старт изменению состояния, после запуска этой функции содержимое виджета "MyBody" будет перестроено. В аргументах задана безымянная функция, которая отрабатывает увеличение индекса на 1.

строка №30 (file: main.dart)

void initState() {

Переопределяем метод "initState" родительского класса. Этот метод имеет определенные особенности. В мануале о нем написано слишком кратко и не совсем понятно, за что непосредственно отвечает этот метод и как правильно его использовать. Но вот некоторая суть этого метода - он вызывается только один раз перед запуском "build", после отработки конструктора виджета. Нам это удобно тем, что в этом методе мы можем запустить наш таймер, который запуститься только один раз, и при перестроении виджета, в связи с изменением состояния, перезапускаться не будет.

строка №31 (file: main.dart)

super.initState();

Запускаем метод "initState" с функционалом заданным в родительском классе.

строка №33 (file: main.dart)

Timer.periodic(Duration(seconds: 3), (Timer timer) {

Запускаем функцию таймера с периодическим исполнением каждые 3 секунды содержимого безымянной функции.

строка №36 (file: main.dart)

if (_index == 2)

Проверяем, установлен ли индекс на последний элемент списка.

строка №37 (file: main.dart)

timer.cancel();

Если установлен, то отменяем таймер, останавливаем его работу.

строка №39 (file: main.dart)

changeIndex();

Если же индекс таймера не на последнем элементе списка, то запускаем функцию изменения индекса "changeIndex", и соответственно вызов метода изменения состояния виджета "setState", который заставит пересобрать виджет с обновленными данными.

строка №45 (file: main.dart)

Widget build(BuildContext context) {

Строим наш виджет в соответствии с текущим состоянием.

строка №47 (file: main.dart)

child: Text(_items[_index]),

Здесь задается текст, который будет выводиться в виджете, в зависимости от значения "_items[_index]" текст будет изменяться при пересборке.


Удачи в разработке!



другие материалы: