Flutter - 多个小部件捕获的异常答案

【问题标题】：Flutter - Exception Caught by multiple widgetsFlutter - 多个小部件捕获的异常
【发布时间】：2021-02-02 23:29:02
【问题描述】：

您好，我正在尝试在 https://flutter.dev/docs/cookbook/design/drawer 的帮助下为我的脚手架添加一个抽屉

到目前为止，我在尝试使用它时遇到了多个错误（发现了2个，我不知道是否还有更多）。

代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: Row(
          children: <Widget>[
            IconButton(icon: Icon(Icons.add), onPressed: () {}),
            ListView(
              padding: EdgeInsets.zero,
              children: <Widget>[
                DrawerHeader(
                  child: Text(
                    "What's up?",
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 30),
                  ),
                  decoration: BoxDecoration(color: Color(0xff171719)),
                ),
                ListTile(
                  title: Text(
                    "Change Theme",
                    style: TextStyle(fontSize: 24),
                  ),
                  // ignore: todo
                  onTap: () {}, //TODO add dark mode
                ),
                ListTile(
                  title: Text(
                    "Sign Out",
                    style: TextStyle(fontSize: 24),
                  ),
                  onTap: () {
                    AuthMethods().signOut().then(
                      (s) {
                        Navigator.pushReplacement(context,
                            MaterialPageRoute(builder: (context) => SignIn()));
                        Navigator.pop(context);
                      },
                    );
                    // ignore: todo
                  }, //TODO sign out
                ),
              ],
            ),
          ],
        ),
      ),

手势捕获的异常：

渲染库捕获的异常：

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

我无法最终重现它，但这通常意味着有一个小部件的视口没有建立尺寸。

当您将 ListView 直接添加到行或列时，通常会发生这种情况。 Y 建议使用 Expanded 小部件（或容器）包装您的 ListView。

【讨论】：

【解决方案2】：

你应该把你的 ListView 放在一个 Widget 中，它会垂直约束 ListView，例如 Expanded：

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

void main() {
  runApp(
    MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(body: MyWidget()),
    ),
  );
}

class MyWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _drawerKey = useState<GlobalKey<ScaffoldState>>(GlobalKey());
    return Scaffold(
      key: _drawerKey.value,
      drawer: Drawer(
        child: Row(
          children: <Widget>[
            IconButton(icon: Icon(Icons.add), onPressed: () {}),
            Expanded(
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  DrawerHeader(
                    child: Text(
                      "What's up?",
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 30),
                    ),
                    decoration: BoxDecoration(color: Color(0xff171719)),
                  ),
                  ListTile(
                    title: Text(
                      "Change Theme",
                      style: TextStyle(fontSize: 24),
                    ),
                    // ignore: todo
                    onTap: () {}, //TODO add dark mode
                  ),
                  ListTile(
                    title: Text(
                      "Sign Out",
                      style: TextStyle(fontSize: 24),
                    ),
                    onTap: () {
                      print('SIGN OUT');
                    }, //TODO sign out
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _drawerKey.value.currentState.openDrawer(),
      ),
    );
  }
}

【讨论】：

【解决方案3】：

解决方案 1：在 Expanded 内设置 ListView
解决方案2：ListView的属性：shrinkWrap:true，

【讨论】：