执行按钮和回调时出现 Flutter RenderFlex 和 setState 问题

Question

您好，我的代码有两个错误，这段代码应该会生成一个输入框，当通过按钮提交信息时，它会将其推送到页面正文。

问题是：

The following assertion was thrown during layout: A RenderFlex overflowed by 99359 pixels on the bottom. The following assertion was thrown building TextInputWidget(dirty, state: _TextInputWidgetState#e5726): setState() or markNeedsBuild() called during build.

main.dart:


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String text = "";

  void changeText(String text) {
    this.setState(() {
      this.text = text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World!'),
      ),
      body: Column(
        children: <Widget>[
          TextInputWidget(this.changeText),
          Text(this.text),
        ],
      ),
    );
  }
}

class TextInputWidget extends StatefulWidget {
  final Function(String) callback;

  TextInputWidget(this.callback);

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

class _TextInputWidgetState extends State<TextInputWidget> {
  final controller = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  click() {
    widget.callback(controller.text);
    controller.clear();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
        controller: this.controller,
        decoration: InputDecoration(
            prefixIcon: Icon(Icons.message),
            labelText: "Type a message.",
            suffixIcon: IconButton(
              icon: Icon(Icons.send),
              splashColor: Colors.orange,
              tooltip: "Post message",
              onPressed: this.click(),
            )));
  }
}

Answer 1

问题来自 onPressed: this.click(),。这是 calling/running 第一次构建时的方法，但你希望在按下按钮时调用它，在这种情况下就这样做。

onPressed: click,

如果你喜欢在里面移动东西onPressed就这样吧

onPressed: () {
  click();
},

执行按钮和回调时出现 Flutter RenderFlex 和 setState 问题

Flutter RenderFlex and setState issue while doing buttons and callbacks

dart

flutter

flutter-layout