Question

我不确定这是否是由于使用了嵌套的脚手架，但是当抽屉扩展时，它的左侧有一个神秘的填充物或边缘。更改sizebox的宽度也不会更改空白的大小。而且抽屉真的很挑剔。

import 'package:flutter/material.dart';

class NewHome extends StatefulWidget {
@override
_NewHomeState createState() => _NewHomeState();
}

class _NewHomeState extends State<NewHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  body: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.centerRight,
        child: SizedBox(
          width: 285.0,
          child: Scaffold(
            drawer: Drawer(
              child: Container(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ),
      Container(
        color: Theme.of(context).accentColor,
        width: 75.0,
        child: Column(
          children: <Widget>[],
        ),
      ),
    ],
  ),
);
}
}

屏幕截图：

关闭：
https://i.imgur.com/E4vgoqr.png

预期：
https://i.imgur.com/hRcfOJ0.png

实际：
https://i.imgur.com/QMGTKpU.png

Answer 1

首先让我解释一下为什么它不能正常工作。首先，它与中心对齐，因此它从中心开始并导致此问题。其次，由于它位于中间并且使用了堆栈，因此您需要找到启动抽屉的确切位置，这就是为什么它呈片状的原因。要解决它：

class NewHome extends StatefulWidget {
  @override
  _NewHomeState createState() => _NewHomeState();
}

class _NewHomeState extends State<NewHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App"),
      ),
      body: Stack(
        children: <Widget>[
          //Deleted the blue box because I don't understand why you need it and it was blocking the swipe zone of the drawer
          Container(
            width: 285.0,
            child: Scaffold(
              drawer: Drawer(
                child: Container(
                  color: Theme.of(context).accentColor,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关于解决方案，我使用了官方文档from here

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Scaffold(
        drawer: Drawer(
          // Add a ListView to the drawer. This ensures the user can scroll
          // through the options in the Drawer if there isn't enough vertical
          // space to fit everything.
          child: ListView(
            // Important: Remove any padding from the ListView.
            padding: EdgeInsets.zero,
            children: <Widget>[
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  // Update the state of the app
                  // ...
                  // Then close the drawer
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  // Update the state of the app
                  // ...
                  // Then close the drawer
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      )
    );
  }
}

Answer 2

我发现flutter在创建小部件时会彼此叠加。这意味着堆栈中的第一个小部件位于第二个小部件的下方，依此类推。因此，我解决此问题的方法是，将第一个装有脚手架儿童的容器放在一个带有填充物的容器中，这使第二个总是可见的容器进入填充物，而抽屉仍然可以很好地打开。

class _NewHomeState extends State<NewHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  body: Stack(
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(left: 74.0),
        child: Container(
          child: Scaffold(
            drawer: Drawer(
              child: Container(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ),
      Container(
        color: Theme.of(context).accentColor,
        width: 75.0,
        child: Column(
          children: <Widget>[],
        ),
      ),
    ],
  ),
);
}
}

抽屉侧面出现意外填充

2 个答案: