flutter - 专注于 TextFormField 时键盘闪烁

问题描述

我有这个登录屏幕，当我点击 TextFormField 时，键盘会显示并快速隐藏。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(
                minHeight: viewportConstraints.maxHeight,
              ),
              child: LoginScreenContent(),
            ),
          );
        },
      ),
    );
  }

它以前在另一个项目中对我有用，但在这个项目中，即使尝试了几种解决方案，我也无法确定问题的原因。

标签： flutterscrollkeyboard

当抽屉或软键盘打开屏幕状态时，有时会自动重新加载构建方法，请查看此链接以获取更多信息。

构建方法的设计方式应该是纯的/没有副作用。这是因为许多外部因素都可以触发新的小部件构建，例如：

Route pop/push 屏幕调整大小，通常是由于键盘外观或方向改变父小部件重新创建了它的孩子小部件依赖的 InheritedWidget （Class.of(context) 模式）改变这意味着构建方法不应触发 http 调用或修改任何状态。

这与问题有什么关系？

您面临的问题是您的构建方法有副作用/不纯，使无关的构建调用很麻烦。

与其阻止构建调用，不如让构建方法纯粹，以便可以随时调用而不会产生影响。

在您的示例中，您将小部件转换为 StatefulWidget，然后将该 HTTP 调用提取到您的状态的 initState：

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  Future<int> future;

  @override
  void initState() {
    future = Future.value(42);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: future,
      builder: (context, snapshot) {
        // create some layout here
      },
    );
  }
}

我已经知道了。我来到这里是因为我真的想优化重建

也可以使小部件能够重建，而无需强制其子级也进行构建。

当小部件的实例保持不变时；Flutter 故意不会重建孩子。这意味着您可以缓存部分小部件树以防止不必要的重建。

最简单的方法是使用 dart const 构造函数：

@override
Widget build(BuildContext context) {
  return const DecoratedBox(
    decoration: BoxDecoration(),
    child: Text("Hello World"),
  );
}

多亏了 const 关键字，即使构建被调用了数百次， DecoratedBox 的实例也将保持不变。

但是您可以手动获得相同的结果：

@override
Widget build(BuildContext context) {
  final subtree = MyWidget(
    child: Text("Hello World")
  );

  return StreamBuilder<String>(
    stream: stream,
    initialData: "Foo",
    builder: (context, snapshot) {
      return Column(
        children: <Widget>[
          Text(snapshot.data),
          subtree,
        ],
      );
    },
  );
}

在此示例中，当 StreamBuilder 收到新值通知时，即使 StreamBuilder/Column 进行了重建，子树也不会重建。这是因为，由于关闭，MyWidget 的实例没有改变。

这种模式在动画中被大量使用。典型用途是 AnimatedBuilder 和所有过渡，例如 AlignTransition。

您还可以将子树存储到您的类的字段中，尽管不太推荐，因为它破坏了热重载功能。

flutter - 专注于 TextFormField 时键盘闪烁

问题描述

解决方案

推荐阅读