2

有没有办法将曲线添加到颤振脚手架抽屉？例如 Curves.ElasticOut。

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

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

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

4

1 回答 1

0

我已经尝试了更多关于你想做的事情，但我当然做不到。但是我创建了带有不同动画的自定义抽屉。在这里你可以给你的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;
  });
}

是时候填写我们的AnimatedContainerfor do 更改了：

  • 我们的AnimatedContainer填充后：
AnimatedContainer(
  color: Colors.grey[900],
  curve: Curves.easeInOutBack,
  transform: Matrix4.translationValues(x, y, 0)..scale(s),
  duration: Duration(seconds: 1),
  child: buildScaffold(),
);

现在我们需要 appBar 来使用我们的方法，所以 foropenDrawer和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,
    ),
  );
}

当你完成everthing时，你会得到这样的结果： 默认屏幕，因此抽屉未打开 第二个屏幕打开了抽屉

于 2021-02-08T14:05:14.340 回答