时间戳

首页 > 解决方案 > 抽屉侧面出现意外的填充物

flutter - 抽屉侧面出现意外的填充物

问题描述

我不确定这是否是由于使用了嵌套脚手架，但我的抽屉在展开时左侧有一个神秘的填充或边距。改变 sizedbox 的宽度也不会改变空白的大小。抽屉也真的很挑剔。

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

标签： flutter

解决方案

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

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,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

对于解决方案，我从这里玩弄了官方文档

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);
                },
              ),
            ],
          ),
        ),
      )
    );
  }
}

推荐阅读