dart - 如何保持汉堡图标没有可见的appBar颤动

Question

我最近尝试在没有 AppBar 或至少完全不可见的情况下为我的菜单滑块保留一个汉堡包图标。第一次尝试是使用 SafeArea，但它清空了 Scaffold。然后我尝试将不透明度设置为 0.0，如下面的代码所示。但它给出了与 SafeArea 相同的结果，而 Scaffold 上没有任何内容。请问有人可以帮忙吗？

    import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData(
        // Define the default Brightness and Colors
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],
      ),
      home: Scaffold(
          Opacity(
            opacity: 0.0,
            appBar: AppBar(),
          ),
          drawer: new Drawer(
            child: new ListView(),
          ),
          body: new Center(
              child: new Column(
            children: <Widget>[],
          ))),
    );
  }
}

Answer 1

如果我很好理解你，你想显示一个菜单按钮来显示Drawer而不显示任何AppBar.

一种选择是使用 aStack作为Scaffold.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  var scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      theme: ThemeData(
        // Define the default Brightness and Colors
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],
      ),
      home: Scaffold(
        key: scaffoldKey,
        drawer: new Drawer(
          child: new ListView(),
        ),
        body: Stack(
          children: <Widget>[
            new Center(
                child: new Column(
              children: <Widget>[],
            )),
            Positioned(
              left: 10,
              top: 20,
              child: IconButton(
                icon: Icon(Icons.menu),
                onPressed: () => scaffoldKey.currentState.openDrawer(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以通过在此处设置相同的颜色和高度 = 0 屏幕截图使 AppBar 完全不可见

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF198BAA),
      appBar: AppBar(
        backgroundColor: Color(0xFF198BAA),
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(18.0),
            child: ListView(
              children: <Widget>[
                ListTile(
                  title: Text('Item1'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

如果我很好地理解了你的问题。

您有自己的自定义菜单按钮来打开/关闭抽屉。您也不想使用 AppBar。

在这种情况下，您可以使用GlobalKey<ScaffoldState>()对象打开抽屉。

import 'package:flutter/material.dart';

GlobalKey<ScaffoldState> _scaffoldState = GlobalKey<ScaffoldState>();

return Scaffold(
  key: _scaffoldState,
  drawer: DrawerView(),
  body: ThemeScreen(
    header: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        IconButton(
          icon: Icon(Icons.menu,
              color: Colors.white,
              size: 15),
          onPressed: (){
            _scaffoldState.currentState.openDrawer();
          },
        ),
      ],
    ),
  ),
);

Answer 4

这类似于 Ox.S 的答案，但您可以使 AppBar 透明，然后将图标更改为您想要的任何颜色。

Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0.0,
    iconTheme: IconThemeData(color: Colors.black),
  ),
  drawer: Drawer(...