Flutter:自定义错误显示

为什么要自定义错误处理

以下面数组越界的错误为例:

dart 复制代码
class _YcHomeBodyState extends State<YcHomeBody> {
  List<String> list = ['苹果', '香蕉'];
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      children: [
        Text(list[0]),
        Text(list[2]),
      ],
    ));
  }
}

当构建失败后会在屏幕上如下显示,这样不太友好,是否可以进行自定义错误显示呢?

自定义错误显示

使用Flutter的错误处理机制:Flutter提供了一个全局的错误处理机制,可以通过重写ErrorWidget.builder来自定义错误显示。

自定义的错误widget

dart 复制代码
class CustomErrorHandle extends StatelessWidget {
  final String errorMessage;
  const CustomErrorHandle({Key? key, required this.errorMessage})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      color: Colors.grey.withOpacity(0.5),
      child: Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          width: MediaQuery.of(context).size.width * 0.8,
          height: MediaQuery.of(context).size.height * 0.3,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10), color: Colors.white),
          child: Column(
            children: [
              Row(
                children: const [
                  Icon(Icons.warning_amber_sharp),
                  Text(
                    "错误提示",
                    style: TextStyle(fontSize: 20),
                  )
                ],
              ),
              Expanded(
                child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 10),
                    //当超出两行时,文本将被截断
                    child: Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                        errorMessage,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                      ),
                    )),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: const Text('确定'))
                ],
              ),
            ],
          ),
        ),
      ),
    ));
  }
}

全局监听

dart 复制代码
main() {
  // 全局错误处理机制
  FlutterError.onError = (FlutterErrorDetails errorDetails) {
    print('错误消息:$errorDetails');
    ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
      return CustomErrorHandle(
        errorMessage: errorDetails.exception.toString(),
      );
    };
  };
  runApp(const MyApp());
}

如果不想显示系统提示的异常信息,可以进行自定义,比如:

dart 复制代码
 String errorMessage = '发生错误,请稍后重试。';
      var exception = errorDetails.exception;
      if(exception is RangeError){
            errorMessage ='数组越界';
      }
      return CustomErrorHandle(
        errorMessage: errorMessage,
      );
相关推荐
qq_5298353522 分钟前
ThreadLocal内存泄漏 强引用vs弱引用
java·开发语言·jvm
景彡先生26 分钟前
C++并行计算:OpenMP与MPI全解析
开发语言·c++
LuciferHuang1 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing1 小时前
前端实习总结——案例与大纲
前端·javascript
量子联盟2 小时前
原创-基于 PHP 和 MySQL 的证书管理系统,免费开源
开发语言·mysql·php
姑苏洛言2 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手3 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言3 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
时来天地皆同力.3 小时前
Java面试基础:概念
java·开发语言·jvm
hackchen3 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang