Hot Reload сохраняет состояние
Часть раздела Добавляем интерактивность путешествия по Flutter на Coddy. Урок 14 из 34.
В предварительном просмотре есть два способа применить изменения. Запуск запускает приложение с нуля. Горячая перезагрузка подставляет новый код, пока приложение продолжает работать, и сохраняет состояние: счётчик сохраняет своё значение.
Попробуй: несколько раз нажми на плюс, измени цвет числа и нажми «Горячая перезагрузка». Появится новый цвет, а счёт останется прежним. Пока ты задаёшь стиль экрана, это избавляет от необходимости снова нажимать кнопки, чтобы вернуться к тому месту, где ты был.
Горячая перезагрузка заново создаёт экран с новым кодом, но не создаёт новое состояние. Поэтому изменение начального значения, например с int _count = 0; на int _count = 10;, не отобразится: эта строка выполняется только при создании состояния. Нажми «Запуск», чтобы увидеть изменение.
То же самое относится к main и к преобразованию StatelessWidget в StatefulWidget. Если после горячей перезагрузки изменение не отображается, нажми «Запуск».
Задание
Легко- Сделай размер числа
64и задай цветColors.deepPurple. Сначала несколько раз нажми на плюс, затем воспользуйся горячей перезагрузкой и посмотри, что счётчик сохранился. - Сделай так, чтобы счётчик начинался с
10. Обрати внимание: горячая перезагрузка этого не покажет, а запуск покажет.
Попробуйте сами
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _count = 0;
void _increase() {
setState(() {
_count++;
});
}
void _decrease() {
setState(() {
_count--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
Text('$_count', style: TextStyle(fontSize: 48)),
IconButton(icon: Icon(Icons.add), onPressed: _increase),
],
),
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Добавляем интерактивность
1Кнопки
Ваша первая кнопкаВывод в консольТекстовые и контурные кнопкиКнопки с иконкамиПлавающая кнопка действия7Переключатели и ползунки
Включаем и выключаем переключателемОтмечаем флажокВыбираем значение ползунком3Виджеты с состоянием
Свой класс виджетаПоказать SnackBarsetState перерисовывает экранСоздание StatefulWidgetСчётчик вверх и внизHot Reload сохраняет состояниеПотренируйтесь самостоятельно: Онлайн-компилятор Flutter