Flutter：如何从单独的Widget方法中调用onPressed（）中的setState（）

Question

我是这个Flutter新手

我试图改变FlatButton文本，同时onPressed 。 我的页面设计在单独的Widget方法中，因此无法在onPressed添加setState() 。

我搜了很多。 但是，找不到。 请帮助我。

import 'package:flutter/material.dart';

int number = 10;

class SecondRoute extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Lists'),
        backgroundColor: new Color(0xFF000000),
      ),
      body: DynamicChange(),
    );
  }
}

class DynamicChange extends StatefulWidget {
  @override
  StateDynamic createState() => StateDynamic();
} // Class SecondRoute

class StateDynamic extends State<DynamicChange> {
  Widget build(BuildContext context) {
    return new Scaffold(
      body: thisScreenNeeds(),
    );
  }
}

Widget thisScreenNeeds() {
  return Container(
    margin: EdgeInsets.only(top: 100, left: 50),
      child: FlatButton(
    child: Text(
      number.toString(),
      textAlign: TextAlign.center,
      style: (TextStyle(
          fontWeight: FontWeight.bold, fontSize: 60, color: Colors.green)),
    ),
    onPressed: () {
       // Unable to add, setState(). Throwing error.
    },
  ));
}

尝试1

onPressed: () {
      // Error: The member 'setState' can only be used within instance members of subclasses
      StateDynamic().setState(() {
        number = number + 1;
   });
},

尝试2

class StateDynamic extends State<DynamicChange> {

.....
.........

void _incrementCounter() {
    setState(() {
      number++;
    });
  }

.....
.......

}

onPressed: StateDynamic()._incrementCounter,

// Run Time Error: 
   This happens when you call setState() on a State object for a 
   widget that hasn't been inserted into the widget tree yet. 
   It is not necessary to call setState() in the constructor, 
   since the state is already assumed to be dirty when it is 
   initially created.

Answer 1

将方法保留在State类中。 也最好将number变量也保留在该类中。 您只能在State类内部直接设置setState ，这就是原因。

在您的情况下，解决方案

class SecondRoute extends StatelessWidget {
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Lists'),
        backgroundColor: new Color(0xFF000000),
      ),
      body: DynamicChange(),
    );
  }
}

class DynamicChange extends StatefulWidget {
  @override
  StateDynamic createState() => StateDynamic();
} // Class SecondRoute

class StateDynamic extends State<DynamicChange> {
  int number = 10;

  Widget build(BuildContext context) {
    return new Scaffold(
      body: thisScreenNeeds(),
    );
  }

  Widget thisScreenNeeds() {
    return Container(
        margin: EdgeInsets.only(top: 100, left: 50),
        child: FlatButton(
          child: Text(
            number.toString(),
            textAlign: TextAlign.center,
            style: (TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 60,
                color: Colors.green)),
          ),
          onPressed: () {
            setState(() {
              number++;
            });
          },
        ));
  }
}

如果您需要完全分离小部件（据我首先了解），则可以通过构造函数发送VoidCallback参数。 喜欢：

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String text = 'Some text';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Text(text),
          ButtonWidget(stateSetter),
        ],
      ),
    );
  }

  void stateSetter() {
    setState(() {
      text = 'Changed text';
    });
  }
}

class ButtonWidget extends StatelessWidget {
  final VoidCallback stateSetter;

  ButtonWidget(this.stateSetter);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: this.stateSetter,
    );
  }
}