Flutter子类无法重写BasePage的pageUI方法问题求助

问题说明 #

在实现Flutter页面基类BasePage时，试图让子类重写pageUI()来自定义页面内容，但遇到两个问题：

• 子类重写pageUI()时，Flutter提示**"The method doesn't override an inherited method"**错误
• 页面始终显示SizedBox而非自定义UI

核心原因是原基础代码中pageUI()是全局函数，而非BasePageState类的成员方法，导致子类无法正确覆盖该方法，且build方法调用的是全局pageUI()，子类重写的方法从未被执行。

修复方案 #

步骤1：修改BasePage代码，将pageUI()转为类成员方法 #

把全局的pageUI()移到BasePageState类内部，作为可重写的成员方法：

import 'package:flutter/material.dart';

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

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

class BasePageState<T extends BasePage> extends State<T> {
  bool isApiCallProcess = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(preferredSize: const Size.fromHeight(70.0), child: _buildAppBar()),
      body: ProgressHUD(
        inAsyncCall: isApiCallProcess,
        opacity: 0.3,
        child: pageUI() ?? SizedBox.shrink(),
      ),
    );
  }

  // 将原全局方法迁移为类成员方法，允许子类重写
  Widget? pageUI() {
    return null;
  }

  Widget _buildAppBar() {
    return AppBar(
      centerTitle: true,
      elevation: 0,
      backgroundColor: Colors.yellow[800],
      automaticallyImplyLeading: true,
      title: const Text(
        'Welcome',
        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20),
      ),
      actions: const [
        Icon(
          Icons.notifications_none,
          color: Colors.white,
        ),
        SizedBox(
          width: 10,
        ),
        Icon(
          Icons.shopping_cart,
          color: Colors.white,
        ),
        SizedBox(
          width: 10,
        ),
      ],
    );
  }
}

步骤2：修改子类ProductPage的重写逻辑 #

现在子类可以正常使用@override注解重写pageUI()方法，返回类型与父类匹配即可：

import 'package:flutter/material.dart';
import 'base_page.dart';

class ProductPage extends BasePage {
  const ProductPage({Key? key, required this.categoryId}) : super(key: key);

  final int categoryId;

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

class _ProductPageState extends BasePageState<ProductPage> {
  @override
  Widget pageUI() {
    return Text(
      widget.categoryId.toString(),
    );
  }
}

关键修改说明 #

1. 迁移方法作用域：将全局pageUI()转为BasePageState的成员方法，让子类可以通过继承关系覆盖该方法
2. 确保方法调用正确：BasePageState的build方法调用的是类内部的pageUI()，而非全局函数
3. 消除注解报错：子类重写时@override会被Flutter正确识别，解决方法覆盖的错误提示

修改后，ProductPage的自定义UI会正常显示，不再返回SizedBox。

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