flutter - 带有垂直打开菜单的 AppBar

问题描述

我正在构建一个 Flutter 应用程序，我正在尝试在 AppBar 中添加一个菜单，当您按下标题时该菜单会垂直打开..我尝试了很多方法，但没有一个给我想要的结果..我有两个主要问题：

当我展开菜单时，它会将小部件推送到屏幕中，而不是覆盖它们（就像在抽屉小部件中一样）。
我不知道如何放置菜单的列表元素，因为 AppBar 小部件内没有子属性。

这是我的代码：

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
  final String screenTitle;
  final double height;
  CustomAppBar({this.screenTitle, @required this.height, Key key})
      : super(key: key);

  @override
  _CustomAppBarState createState() => _CustomAppBarState();

  Size get preferredSize {
    return new Size.fromHeight(300);
  }
}

class _CustomAppBarState extends State<CustomAppBar> {
  bool selected = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        overflow: Overflow.clip,
        alignment: Alignment.topCenter,
        children: <Widget>\[
          AnimatedContainer(
            duration: Duration(milliseconds: 1000),
            curve: Curves.easeInOutQuad,
            alignment: Alignment.bottomCenter,
            height: selected ? 300 : 100,
            child: Container(
              height: 300,
              width: double.infinity,
              child: AppBar(
                shape: CustomShapeBorder(),
                title: Center(
                  child: GestureDetector(
                      onTap: () {
                        setState(() {
                          selected = !selected;
                        });
                      },
                      child: Text('STYLE')),
                ),
              ),
            ),
          )
        \],
      ),
    );
  }

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

class CustomShapeBorder extends ContinuousRectangleBorder {
  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    final doubl[![enter image description here][1]][1]e innerCircleRadius = 130.0;

    Path path = Path();
    path.lineTo(0, rect.height);
    path.quadraticBezierTo(rect.width / 2 - (innerCircleRadius / 2) - 30,
        rect.height + 15, rect.width / 2 - 75, rect.height + 50);
    path.cubicTo(
        rect.width / 2 - 40,
        rect.height + innerCircleRadius - 40,
        rect.width / 2 + 40,
        rect.height + innerCircleRadius - 40,
        rect.width / 2 + 75,
        rect.height + 50);
    path.quadraticBezierTo(rect.width / 2 + (innerCircleRadius / 2) + 30,
        rect.height + 15, rect.width, rect.height);
    path.lineTo(rect.width, 0.0);
    path.close();

    return path;
  }
}

标签： flutterdart

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>[
      DrawerHeader(
        child: Text('Drawer Header'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
      ListTile(
        title: Text('Item 2'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
    ],
  ),
);

flutter - 带有垂直打开菜单的 AppBar

问题描述

解决方案

推荐阅读