Flutter如何将HTTP Get函数从StatefulWidget的initState迁移至MobX

完全可行，将业务逻辑（比如网络请求）从Widget中剥离到MobX Store是状态管理的最佳实践，既能实现代码解耦，也能让Widget只专注于UI渲染。以下是具体操作步骤：

1. 改造MobX Store #

将原StatefulWidget中的searchPokemonGOData方法迁移至Store，并添加可观察状态变量（用于监听数据变化、加载状态、错误信息）：

import 'package:mobx/mobx.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

part 'pokemon_store.g.dart';

class PokemonStore = _PokemonStore with _$PokemonStore;

abstract class _PokemonStore with Store {
  // 可观察的宝可梦列表，数据变化时自动通知UI刷新
  @observable
  List? pokedex;

  // 可观察的加载状态，用于显示加载动画
  @observable
  bool isLoading = false;

  // 可观察的错误信息，用于处理请求失败场景
  @observable
  String? errorMessage;

  // 标记为MobX Action，用于修改可观察状态
  @action
  Future<void> searchPokemonGOData() async {
    isLoading = true;
    errorMessage = null;
    try {
      final url = Uri.http(
        'raw.githubusercontent.com',
        '/Biuni/PokemonGO-Pokedex/master/pokedex.json',
      );
      final response = await http.get(url);
      if (response.statusCode == 200) {
        final decodedData = jsonDecode(response.body);
        pokedex = decodedData['pokemon'];
      } else {
        errorMessage = '请求失败，状态码：${response.statusCode}';
      }
    } catch (e) {
      errorMessage = '网络错误：$e';
    } finally {
      isLoading = false;
    }
  }
}

修改完成后，重新生成MobX的.g文件：

flutter pub run build_runner build

2. 在Widget中使用Store并替代initState调用 #

你可以选择将Store通过依赖注入（如Provider）全局共享，或在Widget局部初始化。两种方式都能替代原initState的触发逻辑：

方式一：使用Provider全局注入（推荐） #

在父组件中注入Store，并在初始化时调用请求方法：

// 例如在MaterialApp或父页面中
ChangeNotifierProvider(
  create: (context) => PokemonStore()..searchPokemonGOData(),
  child: PokemonGrid(),
)

然后在PokemonGrid中通过Observer监听状态变化并渲染UI：

class PokemonGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final pokemonStore = Provider.of<PokemonStore>(context);

    return Observer(
      builder: (_) {
        if (pokemonStore.isLoading) {
          return const Center(child: CircularProgressIndicator());
        }
        if (pokemonStore.errorMessage != null) {
          return Center(child: Text(pokemonStore.errorMessage!));
        }
        return GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemCount: pokemonStore.pokedex?.length ?? 0,
          itemBuilder: (context, index) {
            final pokemon = pokemonStore.pokedex![index];
            return Card(
              child: Column(
                children: [
                  Image.network(pokemon['img']),
                  Text(pokemon['name']),
                ],
              ),
            );
          },
        );
      },
    );
  }
}

方式二：局部初始化Store #

如果不需要全局共享Store，可以在StatefulWidget中初始化，并在initState中调用请求方法：

class PokemonGrid extends StatefulWidget {
  @override
  State<PokemonGrid> createState() => _PokemonGridState();
}

class _PokemonGridState extends State<PokemonGrid> {
  late final PokemonStore pokemonStore;

  @override
  void initState() {
    super.initState();
    pokemonStore = PokemonStore();
    // 使用addPostFrameCallback确保Widget已挂载后再发起请求
    WidgetsBinding.instance.addPostFrameCallback((_) {
      pokemonStore.searchPokemonGOData();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (_) {
        if (pokemonStore.isLoading) {
          return const Center(child: CircularProgressIndicator());
        }
        if (pokemonStore.errorMessage != null) {
          return Center(child: Text(pokemonStore.errorMessage!));
        }
        return GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemCount: pokemonStore.pokedex?.length ?? 0,
          itemBuilder: (context, index) {
            final pokemon = pokemonStore.pokedex![index];
            return Card(
              child: Column(
                children: [
                  Image.network(pokemon['img']),
                  Text(pokemon['name']),
                ],
              ),
            );
          },
        );
      },
    );
  }
}

核心优势 #

• 彻底分离UI与业务逻辑，代码更易维护
• 无需手动调用setState，MobX会自动监听状态变化并刷新UI
• 加载状态、错误信息的管理更规范，提升用户体验

内容的提问来源于stack exchange，提问作者Caio Andrade