Question

我有一个有状态的小部件：

class PractiseInterview extends StatefulWidget {
  @override
  _PractiseInterviewState createState() => _PractiseInterviewState();
}

class _PractiseInterviewState extends State<PractiseInterview> {
  String outputText = '0';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Practise'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Text(
              outputText,         //**outputText is here**  
            ),
            Expanded(
              child: Divider(),
            ),
            Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    ChnageText(text: 'changed',),
                  ],
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

注意我的outputText = '0'在这里。

然后我在有状态小部件中为我的OutlineButton提供了一个无状态小部件：

class ChnageText extends StatelessWidget {
  const ChnageText({ this.text});
  final String text;

  buttonPressed(String text) {
    if (text == 'changed') {
      //TODO: change outputText value to 'changed' at the click of this button
    }
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: OutlineButton(
        onPressed: () {
          buttonPressed(text);
        },
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Text(
            text,
            style: TextStyle(
              fontSize: 15.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

我在我的无状态窗口小部件中提到了TODO，在单击按钮时，我想将outputText = '0'更改为outputText = 'changed'。我不知道该怎么做

我是新手，我无法理解这一点。基本上，我是在做一个计算器，单击该按钮时应显示该按钮的值。

Answer 1

将来自父级的回调传递给ChnageText，以更改outputText并调用setState。

class ChnageText extends StatelessWidget {
  const ChnageText({this.text, this.callback});
  final String text;
  final VoidCallback callback;

  buttonPressed(String text) {
    if (text == 'changed') {
      callback();//Call callback here
    }
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: OutlineButton(
        onPressed: () {
          buttonPressed(text);
        },
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Text(
            text,
            style: TextStyle(
              fontSize: 15.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

class _PractiseInterviewState extends State<PractiseInterview> {
  String outputText = '0';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Practise'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Text(
              outputText,         //**outputText is here**  
            ),
            Expanded(
              child: Divider(),
            ),
            Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    ChnageText(text: 'changed', callback: () {setState((){outputText = 'changed';});}),// Pass callback here
                  ],
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

理想情况下，您根本不需要这样做。 ChnageText中的内容无需单独存在StatelessWidget中。将所有这些内容直接放在父项中可以解决此问题。

class _PractiseInterviewState extends State<PractiseInterview> {
  String outputText = '0';

  buttonPressed(String text) {
    if (text == 'changed') {
      setState(() {
        outputText = 'changed';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Practise'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            Text(
              outputText, //**outputText is here**
            ),
            Expanded(
              child: Divider(),
            ),
            Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    //Put ChnageText directly into the build of the parent
                    Expanded(
                      child: OutlineButton(
                        onPressed: () {
                          buttonPressed('changed');
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(24.0),
                          child: Text(
                            'changed',
                            style: TextStyle(
                              fontSize: 15.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

将字符串值从一个有状态小部件更改为另一个有状态小部件

1 个答案: