多次调用 Flutter 构建

Question

我有一个底部导航栏，其中有一个列表页面，该页面使用 bloc 表示状态。

class _MainPageState extends State<MainPage> {
  int _index = 0;
  @override
  Widget build(BuildContext context) {
    final List<Widget> _widgets = [
      const ListPage(),
      Scaffold(),
      Scaffold(),
      
    ];

    return Scaffold(
        body: IndexedStack(
          index: _index,
          children: _widgets,
        ),
      bottomNavigationBar: BottomNavigationBar(
    ...


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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) =>
          getIt<ListBloc>()..add(const ListEvent.load(limit: 10)),
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(),
          body: const List(),
        ),
      ),
    );
  }
}

问题是build 被呼叫了 4 次。这会导致事件获取列表 4 次。

不知道在哪里添加事件以防止重新构建。

如果我在 statefull 小部件的 initState 中添加事件。当从小部件树中获取 bloc 时，Bloc 无法识别上下文中的 ListBloc。

Answer 1

最好的方法是在主路由（包含底部导航的路由）的 initState 中添加事件。如下代码所示。

class _MainPageState extends State<MainPage> {
  int _index = 0;

  @override
  void initState() {
    super.initState();
    getIt<ListBloc>().add(const ListEvent.load(limit: 10));
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> _widgets = [
      const ListPage(),
      Scaffold(),
      Scaffold(),
      
    ];

    return Scaffold(
        body: IndexedStack(
          index: _index,
          children: _widgets,
        ),
      bottomNavigationBar: BottomNavigationBar(
    ...


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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) =>
          getIt<ListBloc>(),
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(),
          body: const List(),
        ),
      ),
    );
  }
}

Answer 2

根据官方文档，您可以将 StatefulWidget 类与 KeepAlive 一起使用（将孩子标记为需要保持活力，即使它位于惰性列表中，否则会删除它）。

在代码中：

class YourStatefulWidget extends StatefulWidget {

//add with AutomaticKeepAliveClientMixin to the state class

class _YourStatefulWidgetState extends State<YourStatefulWidget > with AutomaticKeepAliveClientMixin {

  //add  super.build(context) under the build method
  Widget build(BuildContext context) {
  super.build(context);

  return //your widget

   @override
   bool get wantKeepAlive => true;
  }
 }
}

或者您可以通过使用状态管理类中的布尔值进行逻辑固定，因为如果小部件重建，该值不会改变。

Answer 3

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.blue,
       
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page',con: context,), // passing context
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title, this.con}) : super(key: key); // receiving context
  final String title;
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
 
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
 
    return Scaffold(
      appBar: AppBar(
 
        title: Text(widget.title),
      ),
      body: Center(
 
        child: Column(
 
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(widget.con).textTheme.headline4, // using received context
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

 
}

将上下文从一个类传递到另一个类，而不是每次都创建一个新的上下文。上面的例子是一个默认的 Flutter 应用，当你创建一个新的 Flutter 项目时。查看 cmets passing context、receiving context 和 using received context 我认为这应该可以解决问题..

Answer 4

我认为问题出在MainPage。当您更改底部导航栏中的选定页面时，您会强制调用build 或MainPage，但它每次都会重新创建_widgets 变量，这会强制更新子小部件。在类范围内移动final _widgets = ...，即您的变量将被创建一次。

您还应该将provide 放在底部导航栏项目上方的级别，即用BlocProvider 包裹ListPage。而且它会在树中找到。或者尝试在ListPage 中的BlocProvider 和SafeArea 之间使用Builder。

要获得ListBloc，您需要在需要组合的小部件中使用BlocProvider.of<ListBloc>(context)。