我正在尝试在 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
最佳答案
这个问题有两种解决方法:
为什么
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, ), ), ), ), ], ); } }
假设出于某种原因我们希望
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
关于dart - 我如何获得一个简单的小部件来响应 IconButton?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52172012/