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

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

您有自己的自定义菜单按钮来打开/关闭抽屉。您也不想使用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 2

如果我对您的了解很好，您想显示一个菜单按钮来显示Drawer，而不显示任何AppBar。

一种选择是将Stack的正文使用Sacffold。

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 3

通过设置相同的颜色和高度= 0，可以使AppBar完全不可见 screenshot here

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 4

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

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

如何在没有可见的AppBar抖动的情况下保持汉堡包图标

4 个答案: