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,
    );
  }
}