0

Не раз читал что, не рекомендуется использовать statefullWidget. Пример BottomNavigationBar с переключением страниц в body. Как можно обойтись без statefullWidget в этом примере? Использовать Bloc? Или же это касается только бизнес логики?

class HomeScreenTest extends StatefulWidget {

@override
  _HomeScreenTestState createState() => _HomeScreenTestState();
}

class _HomeScreenTestState extends State<HomeScreenTest> {
  int _currentIndex = 0;
  final pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            title: Text('pag1'),
          ),
          BottomNavigationBarItem(
            title: Text('page'),
          ),
          BottomNavigationBarItem(
            title: Text('page3'),
          ),
        ],
      ),
    );
  }
}

1 ответ 1

2

StatefulWidget и вправду нельзя использовать везде, но для начала разберемся почему.

Когда мы вызываем State.setState, StatefulWidget начинает перестраиваться. При перестроении он удаляет элементы ниже его по дереву (вложенные chlid'ы), тем самым заставляя перестраивать все до конца дерева виджетов. Из-за этого перестроения забиваться isolate в котором работает UI и происходит потребление ресурсов аппарата.

StatefulWidget можно "безопасно" использовать либо без State.setState. Либо в конце дерева виджетов, когда он не будет заставлять перестраиваться нижние виджеты.


Но отказаться от State.setState мы не можем, нам нужно динамический изменять UI, что для этого есть?

State Management - оптимизация перестроения UI. Их много и у всех разные подходы:

  1. Bloc иммутабельное состояние на основе Stream, так называемый реактивный интерфейс.
  2. MobX мутабельное состояние с мутациями.
  3. Redux иммутабельное глобальное состояние с однонаправленным потоком данных.
  4. И другие...

Change Notifier - уведомление виджетов о смене состоянии, для небольшого количества слушателей.

Persist Widget - кеш UI, вместо того чтобы делать перестроение виджета мы можем показать его из кеша.


Так что использовать для BottomNavigationBar и подобных небольших задач?

Ответ: использовать Change Notifier (+ Persist Widget, если подходит под задачу). Для таких задач будет лишним использовать State Management. Вот пример как это можно сделать (provider использовал для удобства работы с Change Notifier):

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

void main() {
  runApp(
    MaterialApp(
      home: MultiProvider(
        providers: [
          ChangeNotifierProvider(create: (_) => Index()),
        ],
        child: BottomNavigationBarController(),
      ),
    ),
  );
}

class Index with ChangeNotifier {
  int _currentIndex = 0;

  get currentIndex => _currentIndex;

  void setIndex(int index) {
    _currentIndex = index;
    notifyListeners();
  }
}

class BottomNavigationBarController extends StatelessWidget {
  final List<Widget> pages = [
    FirstPage(
      key: PageStorageKey('Page1'),
    ),
    SecondPage(
      key: PageStorageKey('Page2'),
    ),
  ];

  final PageStorageBucket bucket = PageStorageBucket();

  Widget _bottomNavigationBar(BuildContext context, int selectedIndex) =>
      BottomNavigationBar(
        onTap: (int index) => context.read<Index>().setIndex(index),
        currentIndex: selectedIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            title: Text('First Page'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('Second Page'),
          ),
        ],
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar:
          _bottomNavigationBar(context, context.watch<Index>().currentIndex),
      body: PageStorage(
        child: pages[context.watch<Index>().currentIndex],
        bucket: bucket,
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('FirstPage'),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('SecondPage'),
    );
  }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.