Flutter中如何创建Material Button类？批量按钮实现方法咨询

一、规范的按钮组件实现方式 #

1. 基于原生组件封装（首推） #

别从零造轮子，直接基于ElevatedButton、TextButton这类原生组件封装，既能自动适配App主题，还自带禁用态、点击反馈这些原生特性：

class CustomPrimaryButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;
  final double? width;

  const CustomPrimaryButton({
    super.key,
    required this.text,
    required this.onPressed,
    this.width,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width ?? double.infinity,
      height: 50,
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Theme.of(context).primaryColor,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
        onPressed: onPressed,
        child: Text(
          text,
          style: const TextStyle(fontSize: 16, color: Colors.white),
        ),
      ),
    );
  }
}

需要改样式的时候，直接加参数或者调整内部的style就行，不用动整个按钮的逻辑。

2. 全局主题统一配置 #

如果所有按钮样式都差不多，直接在ThemeData里全局配置，省得每个按钮重复写样式：

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        minimumSize: const Size(double.infinity, 50),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
    ),
  ),
)

之后用原生ElevatedButton就自动套用这个样式，要改全局风格只需要改这里。

3. 带加载状态的按钮封装 #

如果需要点击后显示加载圈的按钮，封装一个带状态的组件就行：

class LoadingButton extends StatefulWidget {
  final String text;
  final VoidCallback onPressed;

  const LoadingButton({super.key, required this.text, required this.onPressed});

  @override
  State<LoadingButton> createState() => _LoadingButtonState();
}

class _LoadingButtonState extends State<LoadingButton> {
  bool _isLoading = false;

  Future<void> _handlePressed() async {
    setState(() => _isLoading = true);
    try {
      await Future.delayed(const Duration(seconds: 1)); // 替换成你的异步操作
      widget.onPressed();
    } finally {
      setState(() => _isLoading = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _isLoading ? null : _handlePressed,
      child: _isLoading
          ? const SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(strokeWidth: 2, color: Colors.white),
            )
          : Text(widget.text),
    );
  }
}

二、MaterialPageRoute常见错误排查 #

1. 上下文不在导航树中 #

报错大多是因为调用Navigator.of(context)时，这个context没有被MaterialApp/CupertinoApp包裹。解决办法：

• 确保你的按钮是MaterialApp的子组件，别在MaterialApp外面用导航
• 或者用GlobalKey全局获取导航器：

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

MaterialApp(
  navigatorKey: navigatorKey,
  home: const HomePage(),
)

// 跳转时这么写
navigatorKey.currentState?.push(MaterialPageRoute(builder: (context) => const NextPage()));

2. 路由builder没返回Widget #

别犯这种低级错误，builder函数必须返回Widget：
错误写法：

onPressed: () {
  Navigator.push(context, MaterialPageRoute(builder: (context) {
    NextPage(); // 没写return！
  }));
}

正确写法：

onPressed: () {
  Navigator.push(context, MaterialPageRoute(builder: (context) => const NextPage()));
}

3. 参数类型不匹配 #

如果路由需要传参数，确保传递的参数类型和接收的一致：

// 接收参数的页面
class DetailPage extends StatelessWidget {
  final String id;
  const DetailPage({super.key, required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Text(id));
  }
}

// 跳转时传正确类型的参数
onPressed: () {
  Navigator.push(context, MaterialPageRoute(
    builder: (context) => const DetailPage(id: '123'),
  ));
}

4. 异步操作后跳转报错 #

如果是异步操作完成后跳转，先检查组件是否还挂载：

onPressed: () async {
  await someAsyncOperation(); // 你的异步接口请求
  if (!mounted) return; // 先判断组件没被销毁再跳转
  Navigator.push(context, MaterialPageRoute(builder: (context) => const NextPage()));
}

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