Question

我试图在SizedBox中创建一个简单的Text小部件，以响应AppBar中IconButton上的点击。我复制了一个具有GridView更新的早期示例（由SO社区提供）的范例（或我认为）。在此当前应用中，显示当前级别。轻按加号图标时，级别应增加。轻按“重播”图标后，级别应重置为1。

在调试过程中，我发现传递给Level_Indicator的级别发生了预期的变化。但是在Level_Indicator_State中，级别的值始终为1；它从未增加，也没有重置。

代码如下。有人可以指出我做错了什么吗？谢谢

// ignore_for_file: camel_case_types
// ignore_for_file: constant_identifier_names
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

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

class Level_Indicator extends StatefulWidget {
  final int level;

  Level_Indicator(this.level, {Key key}) : super(key: key);

  @override // Level_Indicator
  Level_Indicator_State createState() => Level_Indicator_State(level);
} // class Level_Indicator

class Level_Indicator_State extends State<Level_Indicator> {
  final int level;

  Level_Indicator_State(this.level);

  @override // Level_Indicator_State
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
          width: 24.0,
          child: Container(
            child: Text(
              '$level',
              style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.bold,
                fontSize: 24.0,
              ) ,
            ),
          ),
        ),
      ],
    );
  }
} // class Level_Indicator_State

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyApp_State();
  }
} // class MyApp

class MyApp_State extends State<MyApp> {
  int level = 1;

  void increment_level ( ){
    level++;
    setState(() {});
  } // increment_level

  void reinitialize() {
    level = 1;
    setState(() {});
  } // reinitialize

  @override // class MyApp_State
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Level Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Level Demo'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                increment_level();
              },
            ),
            IconButton(
              icon: Icon(Icons.replay),
              onPressed: () {
                reinitialize();
              },
            ),
          ]
        ),
        body: Center(
          child:
            Level_Indicator(level)
        ),
      ),
    );
  }
} // class MyApp_State

Answer 1

您要在level StatefulWidget和Level_Indicator类的两个中定义一个Level_Indicator_State属性。

您不需要通过构造函数将其从Level_Indicator传递给Level_Indicator_State类。您只需从Level_Indicator_State调用widget.level。

这也意味着 Level_Indicator不必是有状态类。您可以通过将其设为无状态类来简化此操作（因为您无需在此小部件内更改状态。您可以从MyApp_State创建新的类。

将Level_Indicator更改为无状态窗口小部件可以解决此问题，因为StatefulWidget生命周期中存在一些不明显的陷阱。

阅读State classes documentation了解更多信息（尤其是对于具有相同runtimeType和键的小部件）。

对于更复杂的情况，您想从StatefulWidget外部增加计数器（更改状态）（并且不将状态保持在其状态类内），则需要某种ValueNotifier或Stream来执行此操作而不只是传递值。

Answer 2

对此问题有两种解决方法：

为什么Level_Indicator是有状态的小部件？它只是在显示给它的东西。 没有要处理的状态。使它成为无状态。

class Level_Indicator extends StatelessWidget {
  final int level;

  Level_Indicator(this.level);

  @override // Level_Indicator_State
  Widget build(BuildContext context) {
    print("level state");
    print("${level}");
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
          width: 24.0,
          child: Container(
            child: Text(
              '${level}',
              style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.bold,
                fontSize: 24.0,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

比方说，出于某些原因，我们希望Level_Indicator成为有状态。在这种情况下，level也不是state的{{1}}变量。因此，将其用作Level_Indicator_State，如下所示。
```
widget.level
```

如何获得一个简单的小部件来响应IconButton？

2 个答案: