Flutter：如何使用 Google Apps 之类的 Drawer 实现浮动 SearchBar（自定义 AppBar）答案

【问题标题】：Flutter: How to implement floating SearchBar (Custom AppBar) with Drawer like Google AppsFlutter：如何使用 Google Apps 之类的 Drawer 实现浮动 SearchBar（自定义 AppBar）
【发布时间】：2020-06-11 06:04:50
【问题描述】：

谁能告诉我如何将菜单抽屉集成到 Row 小部件中而不是 Scaffold 小部件中？类似于 Gmail 的应用（使用抽屉图标搜索）。

【问题讨论】：

是什么让你不这样做？
当我的抽屉溢出并且没有显示任何按钮时，我不知道该怎么做:(你能给我一个演示代码吗？
在 gmail 应用程序中，他们只是在搜索栏中显示一个抽屉图标，并在点击操作时打开抽屉
但我无法添加它。请给我一个基本代码。
检查一下，可能对你有帮助：- stackoverflow.com/questions/57748170/…

标签： flutter dart

【解决方案1】：

这很简单。

输出截图

步骤：

第 1 步：

使用自定义 Appbar 小部件定义脚手架

return Scaffold(
  appBar: FloatAppBar(),
  body: Center(
    child: Text('Body'),
  ),
  drawer: Drawer(
    child: SafeArea(
      right: false,
      child: Center(
        child: Text('Drawer content'),
      ),
    ),
  ),
);

第 2 步：

实现 PreferredSizeWidget 以创建自定义 AppBar

class FloatAppBar extends StatelessWidget with PreferredSizeWidget {

第 3 步：

在需要时使用Scaffold.of(context).openDrawer(); 打开抽屉。

这是完整的sn-p。

  import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: FloatAppBar(),
      body: Center(
        child: Text('Body'),
      ),
      drawer: Drawer(
        child: SafeArea(
          right: false,
          child: Center(
            child: Text('Drawer content'),
          ),
        ),
      ),
    );
  }
}

class FloatAppBar extends StatelessWidget with PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          top: 10,
          right: 15,
          left: 15,
          child: Container(
            color: Colors.white,
            child: Row(
              children: <Widget>[
                Material(
                  type: MaterialType.transparency,
                  child: IconButton(
                    splashColor: Colors.grey,
                    icon: Icon(Icons.menu),
                    onPressed: () {
                      Scaffold.of(context).openDrawer();
                    },
                  ),
                ),
                Expanded(
                  child: TextField(
                    cursorColor: Colors.black,
                    keyboardType: TextInputType.text,
                    textInputAction: TextInputAction.go,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.symmetric(horizontal: 15),
                        hintText: "Search..."),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);
}

观看现场演示here。

【讨论】：

显示错误The class 'PreferredSize' can't be used as a mixin because it extends a class other than Object.

【解决方案2】：

AppBar 小部件已经有相应的机制，


AppBar(
 drawaer: YourDrawer(),
 actions: [
   IconButton(
    icon: Icon(Icons.search),
    onPressed: (){}
   ) 
 ]
);

它将创建您想要的 Gmail 应用栏

【讨论】：