Flutter中MovieListWidget的initState调用super报错原因咨询

问题概述 #

开发Flutter组件时触发Dart错误，错误提示：

The method 'initState' isn't defined in a superclass of 'MovieListWidget'.
Try correcting the name to the name of an existing method, or defining a method named 'initState' in a superclass.dart

删除super.initState()后错误消失，下面详细解释报错的核心原因。

问题代码 #

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

class Movie {
  final String imageName;
  final String title;
  final String time;
  final String description;

  const Movie({
    required this.imageName,
    required this.title,
    required this.time,
    required this.description,
  });
}

class MovieListWidget extends StatefulWidget {
  final _movies = const [
    Movie(
      imageName: AppImages.moviePlacholder,
      title: 'TOP GUN',
      time: 'April 7, 2021',
      description:
          'Fhjshfkhfdkhskjhkjsdhfkjsdhfjhsdfkjhsdkjfhskjdhfkjsdhfjsdhfkjhsdfjhsdkjfhskhdfksdhfkjdshfkjhsdkjfhskjdfhskjdhfkjshdfkjhsdkjfhskjdfhksjhfjdhgfkjshgkjdhjghfjksdhkjgfdhgjkhdgkjhdskghsfjghsdfhgairhe',
    ),
    Movie(
      imageName: AppImages.moviePlacholder,
      title: 'The Walking Dead',
      time: '31 Oct 2010',
      description:
          'sdjfhskdhskjdhfjksdhfkjdhkfjshkjnfhvbhjbfkhvbkjnkjgnfkjvnkjnvkjngkjfvn',
    ),
    Movie(
      imageName: AppImages.moviePlacholder,
      title: 'Grey\'s Anatomy',
      time: '27 Mar 2005',
      description:
          'sdjfhskdhskjdhfjksdhfkjdhkfjshkjnfhvbhjbfkhvbkjnkjgnfkjvnkjnvkjngkjfvn',
    ),
    Movie(
      imageName: AppImages.moviePlacholder,
      title: 'The Big 4',
      time: '19 Dec 2022',
      description:
          'sdjfhskdhskjdhfjksdhfkjdhkfjshkjnfhvbhjbfkhvbkjnkjgnfkjvnkjnvkjngkjfvn',
    ),
    Movie(
      imageName: AppImages.moviePlacholder,
      title: 'The Witcher: Blood Origin',
      time: '25 Dec 2022',
      description:
          'sdjfhskdhskjdhfjksdhfkjdhkfjshkjnfhvbhjbfkhvbkjnkjgnfkjvnkjnvkjngkjfvn',
    ),
    Movie(
      imageName: AppImages.moviePlacholder,
      title: 'Medieval',
      time: '08 Sep 2022',
      description:
          'sdjfhskdhskjdhfjksdhfkjdhkfjshkjnfhvbhjbfkhvbkjnkjgnfkjvnkjnvkjngkjfvn',
    ),
    Movie(
      imageName: AppImages.moviePlacholder,
      title: 'Disenchanted',
      time: '18 Nov 2022',
      description:
          'sdjfhskdhskjdhfjksdhfkjdhkfjshkjnfhvbhjbfkhvbkjnkjgnfkjvnkjnvkjngkjfvn',
    ),
  ];
  final _searchController = TextEditingController();

  void initState() {
    super.initState();
    _searchController.addListener(() {});
  }

  MovieListWidget({super.key});

  @override
  State<MovieListWidget> createState() => _MovieListWidgetState();
}

class _MovieListWidgetState extends State<MovieListWidget> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView.builder(
            padding: const EdgeInsets.only(top: 60),
            itemCount: widget._movies.length,
            itemExtent: 163,
            itemBuilder: (BuildContext context, int index) {
              final movie = widget._movies[index];
              return Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                child: Stack(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius:
                              const BorderRadius.all(Radius.circular(10)),
                          border:
                              Border.all(color: Colors.black.withOpacity(0.2)),
                          boxShadow: [
                            BoxShadow(
                                color: Colors.black.withOpacity(0.1),
                                blurRadius: 8,
                                offset: const Offset(2, 2)),
                          ]),
                      clipBehavior: Clip.hardEdge,
                      child: Row(
                        children: [
                          Image(image: AssetImage(movie.imageName)),
                          Expanded(
                            child: Padding(
                              padding:
                                  const EdgeInsets.symmetric(horizontal: 20),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  const SizedBox(height: 20),
                                  Text(
                                    movie.title,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                        fontWeight: FontWeight.bold),
                                  ),
                                  const SizedBox(height: 5),
                                  Text(
                                    movie.time,
                                    maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(color: Colors.grey),
                                  ),
                                  const SizedBox(height: 20),
                                  Text(
                                    movie.description,
                                    maxLines: 2,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    Material(
                      color: Colors.transparent,
                      child: InkWell(
                        borderRadius: BorderRadius.circular(10),
                        onTap: () {
                          debugPrint('URURURURU');
                        },
                      ),
                    ),
                  ],
                ),
              );
            }),
        Padding(
          padding: const EdgeInsets.all(10),
          child: TextField(
            controller: widget._searchController,
            decoration: InputDecoration(
                labelText: 'Search',
                filled: true,
                fillColor: Colors.white.withAlpha(200),
                border: const OutlineInputBorder()),
          ),
        ),
      ],
    );
  }
}

核心原因 #

1. 生命周期方法归属错误
   initState是Flutter中State类专属的生命周期方法，只能在State的子类（也就是你的_MovieListWidgetState）里重写使用。但你错误地把它定义在了StatefulWidget的子类（MovieListWidget）中，完全不符合Flutter组件生命周期规则。

2. super调用无对应方法
   MovieListWidget的父类是StatefulWidget，这个类本身并没有initState方法。当你在自定义的initState方法里调用super.initState()时，Dart编译器找不到父类中的对应方法，直接抛出错误。

3. 移除super调用后的无效状态
   删除super.initState()后，错误虽然消失，但这个自定义的initState方法根本不会被Flutter的生命周期流程触发执行，相当于写了个无用的方法，完全达不到给_searchController添加监听器的目的。

正确修复方式 #

把initState方法移到_MovieListWidgetState中，同时保留super.initState()调用（重写生命周期方法的强制要求），另外建议把_searchController的定义也移到State类中（控制器属于组件状态的一部分）：

class _MovieListWidgetState extends State<MovieListWidget> {
  late final TextEditingController _searchController;

  @override
  void initState() {
    super.initState();
    _searchController = TextEditingController();
    _searchController.addListener(() {});
  }

  @override
  void dispose() {
    _searchController.dispose(); // 销毁控制器避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // ... 原有ListView代码
        Padding(
          padding: const EdgeInsets.all(10),
          child: TextField(
            controller: _searchController,
            // ... 原有输入框装饰代码
          ),
        ),
      ],
    );
  }
}

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