Question

有没有一种方法可以将曲线添加到脚手架抽屉中？例如Curves.ElasticOut。

我考虑过扩展Drawer或DrawerControllerState类，以创建允许曲线输入的自定义版本，但是似乎没有明显的方法。

有一个有用的插件，可使用其自己的sidemenu类提供曲线功能，但我想使用脚手架抽屉来完成此操作，因为它似乎不应该是一个困难的扩展（替代插件https://github.com/GabrieleCicconetti/uts_sidemenu/blob/master/lib/uts_sidemenu.dart）

我已经研究了现有的SO问题，找不到与该主题重复的问题，但这是我的第一个关于Stack Overflow的问题，如果我在这里犯了任何错误，我们深表歉意。

Answer 1

u无法通过抽屉小部件执行此操作，您必须编写小部件

看看这个 https://stackoverflow.com/a/51199024/3127282

Answer 2

我已经尝试了更多关于你想做的事情，但我当然做不到。但是我创建了带有不同动画的自定义抽屉。在这里你可以给出你的 duration, curve。那么它是否比您想要创建的更复杂、更漂亮。这是源代码和解释：

首先我们需要创建两个有状态的小部件，CustomDrawer 和 HomeScreem：创建这个小部件后，我们需要创建 Wrapper 小部件，它可以控制我们的屏幕变化。

Wrapper 小部件：

class Wrapper extends StatelessWidget {
  const Wrapper({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CustomDrawer(),
        HomeScreen(),
      ],
    );
  }
}

然后我们必须创建我们的 CustomDrawer 小部件：

CustomDrawer 小部件：

class CustomDrawer extends StatefulWidget {
  @override
  _CustomDrawerState createState() => _CustomDrawerState();
}

class _CustomDrawerState extends State<CustomDrawer> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffD53437),
      body: Stack(
        children: [
          /// Add here whatever you want..
          Row(children: []),
        ],
      ),
    );
  }
}

是时候创建 HomeScreen 小部件来管理动画了。所以我们要做的一切都在这里。这里我们需要创建一个有状态的wideget并返回AnimatedContainer。如您所见：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      color: Colors.grey[900],
      child: buildScaffold(),
    );
  }

  Widget buildScaffold() {
    return Scaffold(
      appBar: buildCustomAppBar(),
      backgroundColor: Colors.black54,
      body: Center(
        child: Text("Curve Drawer Example"),
      )
    );
  }

现在我们要制定方法和一些计算来管理我们的屏幕。首先创建这个变量到 _HomeScreenState:

double x = 0;
double y = 0;
double s = 1;
bool _isDrawerOpened = false;
int _currentIndex = 0;

那么我们需要两个方法，openDrawer 和 closeDrawer。

首先是openDrawer：

void openDrawer() {
  setState(() {
    x = 250;
    y = 150;
    s = 0.6;
    _isDrawerOpened = true;
  });
}

第二个是 closeDrawer：

void closeDrawer() {
  setState(() {
    x = 0;
    y = 0;
    s = 1;
    _isDrawerOpened = false;
  });
}

是时候填写我们的 AnimatedContainer 以进行更改：

填充后我们的AnimatedContainer：

AnimatedContainer(
  color: Colors.grey[900],
  curve: Curves.easeInOutBack,
  transform: Matrix4.translationValues(x, y, 0)..scale(s),
  duration: Duration(seconds: 1),
  child: buildScaffold(),
);

现在我们需要 appBar 来使用我们的方法，所以对于 openDrawer 和 closeDrawer：

AppBar buildCustomAppBar() {
  return AppBar(
    backgroundColor: Colors.black,
    leading: IconButton(
      icon: Icon(
        _isDrawerOpened ? Icons.clear : Icons.menu,
        color: Colors.white,
      ),
      onPressed: _isDrawerOpened ? closeDrawer : openDrawer,
    ),
  );
}

如果您完成了这些步骤，那么您就可以使用和享受了！只需将 Wrapper 放入您的 main.dart > MaterialApp 的主页。

HomeScreen 的完整代码：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final pageController = PageController();

  double x = 0;
  double y = 0;
  double s = 1;
  bool _isDrawerOpened = false;
  int _currentIndex = 0;

  void openDrawer() {
    setState(() {
      x = 250;
      y = 150;
      s = 0.6;
      _isDrawerOpened = true;
    });
  }

  void closeDrawer() {
    setState(() {
      x = 0;
      y = 0;
      s = 1;
      _isDrawerOpened = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      color: Colors.grey[900],
      curve: Curves.easeInOutBack,
      transform: Matrix4.translationValues(x, y, 0)..scale(s),
      duration: Duration(seconds: 1),
      child: buildScaffold(),
    );
  }

  Widget buildScaffold() {
    return Scaffold(
      appBar: buildCustomAppBar(),
      backgroundColor: Colors.black54,
      body: Center(
        child: Text("Curve Drawer Example"),
      ),
    );
  }

  AppBar buildCustomAppBar() {
  return AppBar(
    backgroundColor: Colors.black,
    leading: IconButton(
      icon: Icon(
        _isDrawerOpened ? Icons.clear : Icons.menu,
        color: Colors.white,
      ),
      onPressed: _isDrawerOpened ? closeDrawer : openDrawer,
    ),
  );
}

当你完成所有事情后，你会得到这样的结果：

颤振抽屉动画曲线

2 个答案: