详解Android如何实现好的弹层体验效果

showDialog(
    context: context,
  	barrierDismissible: false,
    builder: (_) => AlertDialog(
      title: const Text('操作提醒'),
      content: const Text('确认要进行此操作吗？'),
      actionsAlignment: MainAxisAlignment.end,
      actions: [
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('取消'),
        ),
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text(
            '删除',
            style: TextStyle(color: Colors.red),
          ),
        ),
      ],
    ),
  );

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('左右抽屉弹层'),
      backgroundColor: Colors.red[800],
      leading: Builder(builder: (context) {
        return IconButton(
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
          icon: const Icon(
            Icons.menu,
          ),
        );
      }),
      actions: [
        Builder(builder: (context) {
          return IconButton(
            onPressed: () {
              Scaffold.of(context).openEndDrawer();
            },
            icon: const Icon(
              Icons.filter_list_alt,
            ),
          );
        }),
      ],
    ),
    drawer: Container(
      width: MediaQuery.of(context).size.width * 3 / 4,
      color: Colors.white,
      child: Center(
        child: TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text('收起'),
        ),
      ),
    ),
    endDrawer: Container(
      width: MediaQuery.of(context).size.width * 3 / 4,
      color: Colors.blue,
      child: Center(
        child: TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: const Text(
            '收起',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    ),
    body: const Center(child: Text('抽屉示例')),
  );
}

showGeneralDialog(
  context: context,
  barrierDismissible: true,
  transitionDuration: const Duration(milliseconds: 300),
  barrierLabel: MaterialLocalizations.of(context).dialogLabel,
  barrierColor: Colors.black.withOpacity(0.5),
  pageBuilder: (context, _, __) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width,
          color: Colors.white,
          child: Card(
            margin: const EdgeInsets.all(0),
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                ListTile(
                  title: const Text('选项 1'),
                  onTap: () => Navigator.of(context).pop('1'),
                ),
                ListTile(
                  title: const Text('选项2'),
                  onTap: () => Navigator.of(context).pop('2'),
                ),
                ListTile(
                  title: const Text('选项3'),
                  onTap: () => Navigator.of(context).pop('3'),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  },
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return SlideTransition(
      position: CurvedAnimation(
        parent: animation,
        curve: Curves.easeOut,
      ).drive(Tween<Offset>(
        begin: const Offset(0, -1.0),
        end: Offset.zero,
      )),
      child: child,
    );
  },
);