Flutter报错：‘Scaffold’无法赋值给‘PreferredSizeWidget’参数及功能异常

问题1：Scaffold无法分配给参数类型PreferredSizeWidget #

你的appBar()方法错误地返回了Scaffold类型，但Scaffold的appBar参数要求的是PreferredSizeWidget（AppBar本身已实现该接口）。不需要在自定义方法中嵌套另一个Scaffold，直接返回AppBar组件即可。

修正后的appBar()方法 #

AppBar appBar() {
  return AppBar(
      title: Text(
        'BreakFast',
        style: TextStyle(
            color: Colors.black, fontSize: 18, fontWeight: FontWeight.bold),
      ),
      backgroundColor: Colors.white,
      elevation: 0.0,
      centerTitle: true,
      leading: GestureDetector(
        onTap: () {},
        child: Container(
          margin: EdgeInsets.all(10),
          alignment: Alignment.center,
          child: SvgPicture.asset('assets/icons/Arrow - Left 2.svg'),
          height: 20,
          width: 20,
          decoration: BoxDecoration(
              color: Color(0xffF7F8F8),
              borderRadius: BorderRadius.circular(10)),
        ),
      ),
      actions: [
        GestureDetector(
          onTap: () {},
          child: Container(
            margin: EdgeInsets.all(10),
            alignment: Alignment.center,
            width: 37,
            child: SvgPicture.asset(
              'assets/icons/dots.svg',
              height: 5,
              width: 5,
            ),
            decoration: BoxDecoration(
                color: Color(0xffF7F8F8),
                borderRadius: BorderRadius.circular(10)),
          ),
        ),
      ]);
}

问题2：直接使用AppBar时文本输入功能未实现 #

你的TextField放在Column中，但默认Column不会让子组件占满剩余空间，可能导致输入框显示异常。如果教程预期将搜索输入框集成到AppBar中，还需要调整AppBar的title组件。

方案1：让body中的TextField正常显示 #

给TextField外层添加Expanded，确保它能占据body的剩余空间：

body: Column(
  children: [
    Expanded(
      child: TextField(
        decoration: InputDecoration(
          hintText: '输入内容...',
          border: OutlineInputBorder(),
        ),
      ),
    ),
  ],
),

方案2：将输入框集成到AppBar中（匹配教程预期） #

把AppBar的title替换为TextField，实现搜索栏样式：

AppBar appBar() {
  return AppBar(
      backgroundColor: Colors.white,
      elevation: 0.0,
      centerTitle: true,
      leading: GestureDetector(
        onTap: () {},
        child: Container(
          margin: EdgeInsets.all(10),
          alignment: Alignment.center,
          child: SvgPicture.asset('assets/icons/Arrow - Left 2.svg'),
          height: 20,
          width: 20,
          decoration: BoxDecoration(
              color: Color(0xffF7F8F8),
              borderRadius: BorderRadius.circular(10)),
        ),
      ),
      title: TextField(
        decoration: InputDecoration(
          hintText: '搜索早餐...',
          border: InputBorder.none,
          filled: true,
          fillColor: Color(0xffF7F8F8),
          contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      actions: [
        GestureDetector(
          onTap: () {},
          child: Container(
            margin: EdgeInsets.all(10),
            alignment: Alignment.center,
            width: 37,
            child: SvgPicture.asset(
              'assets/icons/dots.svg',
              height: 5,
              width: 5,
            ),
            decoration: BoxDecoration(
                color: Color(0xffF7F8F8),
                borderRadius: BorderRadius.circular(10)),
          ),
        ),
      ]);
}

完整修正后的home.dart代码 #

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar(),
      body: Column(
        children: [
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintText: '输入内容...',
                border: OutlineInputBorder(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  AppBar appBar() {
    return AppBar(
        title: Text(
          'BreakFast',
          style: TextStyle(
              color: Colors.black, fontSize: 18, fontWeight: FontWeight.bold),
        ),
        backgroundColor: Colors.white,
        elevation: 0.0,
        centerTitle: true,
        leading: GestureDetector(
          onTap: () {},
          child: Container(
            margin: EdgeInsets.all(10),
            alignment: Alignment.center,
            child: SvgPicture.asset('assets/icons/Arrow - Left 2.svg'),
            height: 20,
            width: 20,
            decoration: BoxDecoration(
                color: Color(0xffF7F8F8),
                borderRadius: BorderRadius.circular(10)),
          ),
        ),
        actions: [
          GestureDetector(
            onTap: () {},
            child: Container(
              margin: EdgeInsets.all(10),
              alignment: Alignment.center,
              width: 37,
              child: SvgPicture.asset(
                'assets/icons/dots.svg',
                height: 5,
                width: 5,
              ),
              decoration: BoxDecoration(
                  color: Color(0xffF7F8F8),
                  borderRadius: BorderRadius.circular(10)),
            ),
          ),
        ]);
  }
}

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