我想在flutter PageView中多屏显示来自mysql数据库的单行数据。以下网站包含mysql数据库的json数据。https://telugu-signaler.000webhostapp.com/get_user.php。它包含10个用户数据,对于每个用户,它具有相应的列,即user_first_name、user_last_name、user_district和user_state。我想在一个屏幕中显示user_first_name和user_last_name,向右滑动后在另一个屏幕中显示user_district和user_state。因此,对于10个用户,将有20个页面滑动。
下面我的代码显示所有4个领域的用户数据在一个单一的屏幕上,但我希望的逻辑如上所述。请帮我解决这个逻辑错误。
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class GetUserData extends StatefulWidget {
const GetUserData({super.key});
@override
State<GetUserData> createState() => _GetUserDataState();
}
class _GetUserDataState extends State<GetUserData> {
late PageController pageController;
@override
void initState() {
super.initState();
pageController = PageController();
}
@override
void dispose() {
pageController.dispose();
super.dispose();
}
Future<List> getUserData() async {
String url = 'https://telugu-signaler.000webhostapp.com/get_user.php';
var response = await http.post(Uri.parse(url), body: '');
var allUserData = jsonDecode(response.body.toString());
return allUserData;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Get User Data'),
),
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
flex: 8,
child: FutureBuilder<List<dynamic>>(
future: getUserData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: PageView.builder(
controller: pageController,
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
var userFirstName =
snapshot.data![index]['user_first_name'];
var userLastName =
snapshot.data![index]['user_last_name'];
var userDistrict =
snapshot.data![index]['user_district'];
var userState = snapshot.data![index]['user_state'];
return Column(
children: [
Container(
color: Color.fromARGB(255, 231, 229, 229),
//// I want following two Text() in one screen/page
child: Text(
'$index- First Name: $userFirstName',
style: TextStyle(fontSize: 30),
),
),
Container(
color: Color.fromARGB(255, 231, 229, 229),
child: Text(
'Last Name: $userLastName',
style: TextStyle(fontSize: 30),
),
),
SizedBox(
height: 50,
),
//// and after swipe right, I want to display following two Text() in another screen/page
Container(
color: Colors.lightGreen,
child: Text(
'$index- District: $userDistrict',
style: TextStyle(fontSize: 30),
),
),
Container(
color: Colors.lightGreen,
child: Text(
'State: $userState',
style: TextStyle(fontSize: 30),
),
),
],
);
},
),
);
}
return const Center(
child: CircularProgressIndicator(),
);
},
),
),
],
),
),
);
}
}
1条答案
按热度按时间nfeuvbwi1#
首先,你需要停止使用FutureBuilder进行API调用,因为FutureBuilder会自我重建,并在每个变化的状态下调用future函数,因此它会重复调用api,你可以使用bloc或cubit代替。
现在这里是解决方案:
你只需要操纵PageViewBuilder的索引,使PageView的长度是dataList的两倍。在builder中将索引除以2层,并将其传递给dataList并获取数据,现在如果页面索引是偶数,则显示firstName和lastName,否则相应地显示地区和州。
这里我在future函数中使用了一些虚拟数据。
你可以参考下面的代码: