场景及要求:
我想从Repository加载一些字符串。在这个例子中,我们使用**Future.delayed()从本地Repository加载它们。
我们有一个按钮来显示所有名称。这些名称应该在showModalBottomSheet()**中列出。如果名称尚未加载,showModalBottomSheet()应该显示一个圆形进度指示器。如果名称已加载,showModalBottomSheet()应该显示名称。
问题是
showModalBottomSheet()如果时间小于3秒,则显示循环进度指示器,如果时间大于3秒,则显示名称。BUT,如果我们打开showModalBottomSheet()在3秒过去之前,并保持打开,showModalBottomSheet的内容()应该自动重新渲染,因为名称在3秒后加载,但循环进度指示器永远不会消失,因为底部工作表永远不会触发重新呈现,即使List已经从Repository加载。
代码
我有下面这个最小可重复的例子,编译运行正常:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(title: 'Title', home: Home());
}
}
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: HomeBody(),
);
}
}
class HomeBody extends StatefulWidget {
const HomeBody({super.key});
@override
State<StatefulWidget> createState() => _HomeBodyState();
}
class _HomeBodyState extends State<HomeBody> {
final NamesRepository _namesRepository = NamesRepository();
late List<String> _names;
@override
void initState() {
super.initState();
_names = [];
_namesRepository.loadNames().then((names) => setState(() {
_names = names;
}));
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
child: const Text('Show all names'),
onPressed: () => _onButtonClick(context),
);
}
void _onButtonClick(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (context) {
if (_names.isEmpty) {
return const Center(child: CircularProgressIndicator());
} else {
return Column(
children: _names.map((name) => Text(name)).toList(),
);
}
},
);
}
}
class NamesRepository {
Future<List<String>> loadNames() {
return Future.delayed(
const Duration(seconds: 3),
() => ['John', 'Maria', 'Lewis', 'Danny'],
);
}
}
我应该怎么做,才能在从Repository加载List时自动重新呈现模态底部工作表?正如你所看到的,我在父Widget中调用了setState(),但是模态底部工作表在状态改变时仍然不会重新呈现自己。我该如何解决这个问题?
1条答案
按热度按时间0g0grzrc1#