Flutter中实现模态框加载时显示Loading组件的方法

我明白你的痛点——弹窗打开时因为要构建复杂的ListView导致卡顿，想先展示加载状态，等目标Widget准备好后再切换显示对吧？咱们可以让弹窗自己管理加载状态，通过异步初始化的方式实现这个需求，下面是具体的修改方案：

核心思路 #

1. 让弹窗组件内部维护加载状态，不需要依赖外部的loading变量，逻辑更内聚
2. 在弹窗初始化时，先显示加载指示器，同时异步执行耗时的构建/数据加载任务
3. 任务完成后更新状态，切换到目标ListView组件

修改后的完整代码 #

触发弹窗的按钮部分

ElevatedButton(
  onPressed: () {
    showModal<void>(
      context: context,
      builder: (BuildContext context) {
        return _ExampleAlertDialog();
      },
    );
  },
  child: const Text('SHOW MODAL'),
),

弹窗组件_ExampleAlertDialog修改

class _ExampleAlertDialog extends StatefulWidget {
  const _ExampleAlertDialog({Key? key}) : super(key: key);

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

class __ExampleAlertDialogState extends State<_ExampleAlertDialog> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // 模拟耗时的构建/数据加载过程，实际项目中替换为真实任务（比如接口请求、复杂计算）
    Future.delayed(const Duration(milliseconds: 300), () {
      // 必须判断mounted，避免弹窗已关闭时调用setState报错
      if (mounted) {
        setState(() {
          _isLoading = false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 50, horizontal: 20),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(5),
        child: Material(
          child: Column(
            children: [
              // 顶部导航栏保持不变
              Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Theme.of(context).dividerColor),
                  ),
                ),
                padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: const [Icon(Icons.arrow_back), Icon(Icons.refresh)],
                ),
              ),
              // 根据加载状态切换显示内容
              Expanded(
                child: _isLoading
                    ? const Center(child: CircularProgressIndicator()) // 加载指示器
                    : ListView.builder(
                        itemCount: 16,
                        itemBuilder: (BuildContext ctxt, int index) {
                          return Container(
                            padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
                            child: Row(
                              children: <Widget>[
                                const Icon(
                                  Icons.radio_button_unchecked,
                                  color: Colors.blue,
                                  size: 12.0,
                                ),
                                const SizedBox(width: 20.0),
                                Text(
                                  "Travetine $index",
                                  style: const TextStyle(
                                    color: Colors.black,
                                    fontWeight: FontWeight.w400,
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                      ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 移除外部依赖：不再需要从父组件传入loading变量，弹窗自己管理_isLoading状态，避免状态同步问题
• 异步初始化：在initState里通过Future.delayed模拟耗时操作，实际项目中可以替换为数据请求、复杂Widget预构建等真实任务，记得判断mounted防止内存泄漏
• 布局优化：去掉了原代码中多余的Expanded嵌套，修复了潜在的布局错误
• 加载状态反馈：加载时显示CircularProgressIndicator（你可以换成自定义的加载组件），让用户立刻看到反馈，不会觉得弹窗卡顿

额外优化建议 #

如果你的ListView项本身也比较复杂，可以考虑：

• 设置ListView.itemExtent来提前指定项的高度，减少布局计算耗时
• 使用AutomaticKeepAliveClientMixin保持列表项状态，避免滚动时重复构建
• 对复杂的列表项进行拆分，拆分成更小的Widget，提高构建效率

内容的提问来源于stack exchange，提问作者bihire boris