Question

当我点击文本小部件时，它将重建小部件，我不知道为什么

main.dart

import 'package:flutter/material.dart';
import './loading.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("Main Build.");

    return MaterialApp(
      title: 'chat',
      home: LoadingPage(),
    );
  }
}

loadingPage.dart

import 'package:flutter/material.dart';
import 'signUp/inputPhone.dart';

class LoadingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("Loading Page Build.");

    FocusScope.of(context).requestFocus(new FocusNode());

    new Future.delayed(Duration(seconds: 3), () {
      print("Flutter APP UI");
      Navigator.of(context).pushReplacement(
          new MaterialPageRoute(builder: (context) => InputPhone()));
    });

    return Stack(
      fit: StackFit.expand,
      alignment: AlignmentDirectional.center,
      children: <Widget>[
        Image.asset("images/bgPatten.png", fit: BoxFit.cover),
        Image.asset("images/logoAll.png"),
      ],
    );
  }
}

inputPhone.dart

import 'package:flutter/material.dart';

class InputPhone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("input phone build");

    return GestureDetector(
      onTap: () {
        print("Tap Outside.");
        FocusScope.of(context).requestFocus(new FocusNode());
      },
      child: Scaffold(
        appBar: new AppBar(
          title: Text("STEP 1"),
          leading: Container(),
          elevation: 0.0,
        ),
        body: TextField(),
      ),
    );
  }
}

但是当我将main.dart主页更改为InputPhone（）时，它将不会发生对不起，我真的不知道我的代码出了什么问题请给我一些帮助...谢谢大家...：）

Answer 1

在 StatelessWidget 中，由于多种原因（例如屏幕旋转，动画，滚动...），正在调用Build方法，因此您应该使用 StatefulWidget

Answer 2

点击TextField小部件时，它会显示键盘。当键盘出现时，您的屏幕尺寸已更改。只是因为您的屏幕尺寸已更改，您需要重新使用正在使用的小部件。

StatefulWidget和StatelessWidget都会发生这种情况。

您可以通过使StatefulWidget的State扩展WidgetsBindingObserver类来验证此行为。当您的键盘通过点击TextField出现时，将调用didChangeMetrics()方法。

发生这种情况是因为脚手架的resizeToAvoidBottomPadding默认为true。

请参考源代码中的以下注释。

  /// If true the [body] and the scaffold's floating widgets should size
  /// themselves to avoid the onscreen keyboard whose height is defined by the
  /// ambient [MediaQuery]'s [MediaQueryData.viewInsets] `bottom` property.
  ///
  /// For example, if there is an onscreen keyboard displayed above the
  /// scaffold, the body can be resized to avoid overlapping the keyboard, which
  /// prevents widgets inside the body from being obscured by the keyboard.
  ///
  /// Defaults to true.
  final bool resizeToAvoidBottomInset;

为什么当我在无状态小部件中点击textField时，它将重建小部件？

2 个答案: