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

Question

我正在尝试在 SizedBox 中制作一个简单的文本小部件，以响应对 AppBar 中 IconButtons 的点击。我复制了一个较早的 GridView 更新示例(由 SO 社区提供)的范例(或者我认为如此)。在此当前应用程序中，显示当前级别。当点击加号图标时，级别应该增加。当点击重放图标时，级别应重置为 1。

在调试过程中，我发现传递给 Level_Indicator 的级别正在按预期变化。但是在Level_Indicator_State中，level的值一直是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

这个问题有两种解决方法:

1. 为什么 Level_Indicator 是有状态的 Widget？它只是显示给它的东西。 没有要处理的状态。使其无状态。

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

2. 假设出于某种原因我们希望 Level_Indicator 是Stateful。在这种情况下，level 也不是 Level_Indicator_State 的 state 变量。因此，将其用作 widget.level，如下所示。

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