Flutter中Scaffold内SizedBox参数报错原因咨询

错误原因拆解 #

• Scaffold组件不存在child参数
  Scaffold的布局结构里没有child这个属性，所有页面内容都应该放在body参数中。如果需要同时展示多个组件，得用Column、Row或Stack这类布局组件把它们组合起来。

• SizedBox不支持elevation和color参数
  elevation（阴影高度）和color（背景色）是Card组件的专属参数，你把这两个属性写到了SizedBox外面，属于参数放错位置，需要移到Card的构造参数里。

修正后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          leading: IconButton(
            icon: const Icon(Icons.menu, color: Colors.pink),
            onPressed: () {
              print("menu button is clicked");
            },
          ),
          title: IconButton(
            onPressed: () { print("이미지버튼 동작"); },
            icon: Image.asset('assets/images/Slimer_by_shinrider-dcqaiza.webp'),
          ),
        ),
        // 用Column垂直排列原Container和SizedBox组件
        body: Column(
          children: [
            Container(
              width: 100,
              height: 200,
              margin: const EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                color: Colors.pinkAccent,
                border: Border.all(color: Colors.purple),
              ),
            ),
            SizedBox(
              height: 80,
              width: 100,
              child: Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16.0),
                ),
                // 将elevation和color移至Card参数内
                elevation: 4.0,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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