Flutter打开键盘时更好的动画

1,350 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。 

本文主要介绍在Flutter键盘打开时更好的动画

在本教程中,我们将仔细聆听键盘可见性,并在它出现时为您的视图提供更平滑的过渡。我们将使用 keyboard_visibility 包来监听可见性,并使用 AnimatedContainer 来为我们的视图 UI 设置动画。

keyboard_visibility

我们将首先将包添加到 pubspec

keyboard_visibility: ^0.5.6

我们将有一个简单的设置。我们的 MyApp 小部件将显示一个 HomeView 作为 MaterialApp 的主页。HomeView 将是一个有状态的小部件。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: HomeView(),
    );
  }
}
​
class HomeView extends StatefulWidget {
  const HomeView({Key key}) : super(key: key);
​
  @override
  _HomeViewState createState() => _HomeViewState();
}
​
class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

在 initState 函数中,我们将监听键盘可见性。

 @override
  void initState() {
    KeyboardVisibilityNotification().addNewListener(
      onChange: (bool visible) {
        print('keyboard $visible');
      },
    );
​
    super.initState();
  }

动画 UI

假设我们有一个 UI,其中文本字段位于屏幕中央。当我们点击它时,我们希望它到达顶部。为此,我们将使用一个动画容器作为我们的根小部件,并在键盘显示时将对齐设置为顶部中心。让我们首先制作我们的 UI。使您的构建小部件看起来像这样。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedContainer(
        curve: Curves.easeOut,
        duration: Duration(
          milliseconds: 400,
        ),
        width: double.infinity,
        height: double.infinity,
        padding: const EdgeInsets.all(20),
        alignment: Alignment.center,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              'Let's start your search',
              style: TextStyle(fontSize: 30),
            ),
            TextField(
              decoration: InputDecoration(
                  hasFloatingPlaceholder: true, hintText: 'Enter things here'),
            )
          ],
        ),
      ),
    );

这应该会在屏幕中央为您提供一个标题和文本字段。接下来让我们制作动画,我们首先将对齐值作为类变量并在 setState 中更改它的值。

// Add variable to top of class
Alignment childAlignment = Alignment.center;
​
@override
void initState() {
  KeyboardVisibilityNotification().addNewListener(
    onChange: (bool visible) {
      // Add state updating code
      setState(() {
        childAlignment = visible ? Alignment.topCenter : Alignment.center;
      });
    },
  );
​
  super.initState();
}
​
// Updated animated container alignment property
...
AnimatedContainer(
  curve: Curves.easeOut,
  duration: Duration(
    milliseconds: 400,
  ),
  width: double.infinity,
  height: double.infinity,
  padding: const EdgeInsets.all(20),
  alignment: childAlignment, // <=== Make sure to use childAlignment here
  child: Column(...),
);

当您现在点击输入字段时,您会看到列以比通常的键盘跳转更流畅的方式显示在屏幕顶部。