是否有办法改变小部件变量位于颤振initState的状态?

Question

• 我在initState中有一个包含widget映射的变量。
• 我的变量中的一个小部件是一个gestredetector，它可以改变变量的值来改变它的子AnimatedAlign的动画。

我的问题是，当我激活onTap我的animatedAlign保持静态。

我应该怎么做才能切换所选的值?

import 'dart:developer';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
late Map<String, Map<String, List<Widget>>> data;
bool selected = false;
@override
void initState() {
// TODO: implement initState
data = {
"Animation and motion widgets": {
"AnimatedAlign": [
GestureDetector(
onTap: () {
setState(() {
selected = !selected;
});
log('$selected inside data');
},
child: Center(
child: Container(
width: 250.0,
height: 250.0,
color: Colors.red,
child: AnimatedAlign(
alignment:
selected ? Alignment.topRight : Alignment.bottomLeft,
duration: const Duration(seconds: 1),
curve: Curves.easeInCirc,
child: const FlutterLogo(size: 50.0),
),
),
),
)
],
},
"Animation and motion widgets2": {
"2widget1": [const Text('2widget1')],
"2widget2": [const Text('2widget2')]
}
};
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Widget catalog'),
),
body: PageView(
children: _getCategories(),
),
);
}
List<Widget> _getCategories() {
List<Widget> categories = [];
for (int i = 0; i < data.length; i++) {
categories.add(
PageView(
scrollDirection: Axis.vertical,
children: getWidgets(i),
),
);
}
return categories;
}
List<Widget> getWidgets(i) {
List<Widget> widgetPage = [];
widgetPage.add(Container(
color: Colors.red,
child: Center(
child: Text(data.keys.toList()[i]),
),
));
data[data.keys.toList()[i]]!.forEach((key, value) {
widgetPage.add(Container(
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Column(
children: [
Center(child: Text(key)),
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: value,
),
),
],
),
),
));
});
return widgetPage;
}
}

Answer 1

每次调用setState()时，都会调用build()作为响应，并重新构建所有小部件。但是，只有在创建了StatefulWidget(在您的示例中是HomeScreen)时才调用initState()。

代码中的问题是AnimatedAlign小部件只在调用initState()时构建一次。当setState()被调用时，你的代码将重用存储在data中的AnimatedAlign实例，而不是重新构建它。

为了让你的代码正常工作，你必须在build()中实例化datamap对象，而不是在initState()中。

还有其他方法可以实现这一点，但为了让您理解这里发生的事情，这是最简单的方法。

Answer 2

Create变量破坏上下文链，不能正确更新ui。您可以创建将在构建方法内部调用的方法，而不是创建变量。我指的是

Map<String, Map<String, List<Widget>>> data() => {
"Animation and motion widgets": {

用data()替换用例data。