Flutter 页面加载前的循环加载
Circular loading before page loads Flutter
我有一个小部件列表和一个函数,它 return 是一个容器,如果小部件列表为空,它会告诉用户添加到列表中:
_isCountEmpty() {
if (count == 0 || count == null) {
//if no widgets in list
return Container(
color: Colors.black,
child: Text('Press edit to start adding exercises',
style: TextStyle(
fontSize: 40,
color: Colors.white,
)));
}
//if widgets in list
return ListView(
children: children,
scrollDirection: Axis.vertical,
);
}
获取计数的initState:
void initState() {
getCount().then(updateCount);
super.initState(); }
计数值是使用在我的 initState 中调用的共享首选项从另一个页面接收的。在 initState 中接收到计数值之前,屏幕认为计数值为 null,因此仅一瞬间 Container() 在 ListView 之前 returned。
取而代之的是,我希望在屏幕从 initState 获取计数值时显示圆形指示器,然后 return 获取计数值后的 Container 或 ListView
谢谢
您可以尝试以下代码,它会从共享首选项加载您的计数器,然后您可以将文本小部件替换为您想要的任何列表或容器,如果 counter == 0 || counter == null
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int counter;
Future<SharedPreferences> prefs;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder(
future: prefs,
builder: (context, AsyncSnapshot<SharedPreferences> snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
} else {
counter = snapshot.data.getInt("counter");
//Replace with whatever widget you want
return Text("Loading is done your counter is : $counter");
}
},
)),
);
}
@override
void initState() {
super.initState();
prefs = SharedPreferences.getInstance();
}
}
我有一个小部件列表和一个函数,它 return 是一个容器,如果小部件列表为空,它会告诉用户添加到列表中:
_isCountEmpty() {
if (count == 0 || count == null) {
//if no widgets in list
return Container(
color: Colors.black,
child: Text('Press edit to start adding exercises',
style: TextStyle(
fontSize: 40,
color: Colors.white,
)));
}
//if widgets in list
return ListView(
children: children,
scrollDirection: Axis.vertical,
);
}
获取计数的initState:
void initState() {
getCount().then(updateCount);
super.initState(); }
计数值是使用在我的 initState 中调用的共享首选项从另一个页面接收的。在 initState 中接收到计数值之前,屏幕认为计数值为 null,因此仅一瞬间 Container() 在 ListView 之前 returned。 取而代之的是,我希望在屏幕从 initState 获取计数值时显示圆形指示器,然后 return 获取计数值后的 Container 或 ListView
谢谢
您可以尝试以下代码,它会从共享首选项加载您的计数器,然后您可以将文本小部件替换为您想要的任何列表或容器,如果 counter == 0 || counter == null
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int counter;
Future<SharedPreferences> prefs;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder(
future: prefs,
builder: (context, AsyncSnapshot<SharedPreferences> snapshot) {
if (!snapshot.hasData) {
return CircularProgressIndicator();
} else {
counter = snapshot.data.getInt("counter");
//Replace with whatever widget you want
return Text("Loading is done your counter is : $counter");
}
},
)),
);
}
@override
void initState() {
super.initState();
prefs = SharedPreferences.getInstance();
}
}