php Flutter PageView:显示单行数据从mysql数据库在多个屏幕

nlejzf6q  于 2023-06-20  发布在  PHP
关注(0)|答案(1)|浏览(99)

我想在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个领域的用户数据在一个单一的屏幕上,但我希望的逻辑如上所述。请帮我解决这个逻辑错误。

  1. import 'package:flutter/material.dart';
  2. import 'package:http/http.dart' as http;
  3. import 'dart:convert';
  4. class GetUserData extends StatefulWidget {
  5. const GetUserData({super.key});
  6. @override
  7. State<GetUserData> createState() => _GetUserDataState();
  8. }
  9. class _GetUserDataState extends State<GetUserData> {
  10. late PageController pageController;
  11. @override
  12. void initState() {
  13. super.initState();
  14. pageController = PageController();
  15. }
  16. @override
  17. void dispose() {
  18. pageController.dispose();
  19. super.dispose();
  20. }
  21. Future<List> getUserData() async {
  22. String url = 'https://telugu-signaler.000webhostapp.com/get_user.php';
  23. var response = await http.post(Uri.parse(url), body: '');
  24. var allUserData = jsonDecode(response.body.toString());
  25. return allUserData;
  26. }
  27. @override
  28. Widget build(BuildContext context) {
  29. return Scaffold(
  30. appBar: AppBar(
  31. title: const Text('Get User Data'),
  32. ),
  33. body: SafeArea(
  34. child: Column(
  35. children: <Widget>[
  36. Expanded(
  37. flex: 8,
  38. child: FutureBuilder<List<dynamic>>(
  39. future: getUserData(),
  40. builder: (context, snapshot) {
  41. if (snapshot.hasData) {
  42. return Padding(
  43. padding: const EdgeInsets.all(8.0),
  44. child: PageView.builder(
  45. controller: pageController,
  46. itemCount: snapshot.data!.length,
  47. itemBuilder: (context, index) {
  48. var userFirstName =
  49. snapshot.data![index]['user_first_name'];
  50. var userLastName =
  51. snapshot.data![index]['user_last_name'];
  52. var userDistrict =
  53. snapshot.data![index]['user_district'];
  54. var userState = snapshot.data![index]['user_state'];
  55. return Column(
  56. children: [
  57. Container(
  58. color: Color.fromARGB(255, 231, 229, 229),
  59. //// I want following two Text() in one screen/page
  60. child: Text(
  61. '$index- First Name: $userFirstName',
  62. style: TextStyle(fontSize: 30),
  63. ),
  64. ),
  65. Container(
  66. color: Color.fromARGB(255, 231, 229, 229),
  67. child: Text(
  68. 'Last Name: $userLastName',
  69. style: TextStyle(fontSize: 30),
  70. ),
  71. ),
  72. SizedBox(
  73. height: 50,
  74. ),
  75. //// and after swipe right, I want to display following two Text() in another screen/page
  76. Container(
  77. color: Colors.lightGreen,
  78. child: Text(
  79. '$index- District: $userDistrict',
  80. style: TextStyle(fontSize: 30),
  81. ),
  82. ),
  83. Container(
  84. color: Colors.lightGreen,
  85. child: Text(
  86. 'State: $userState',
  87. style: TextStyle(fontSize: 30),
  88. ),
  89. ),
  90. ],
  91. );
  92. },
  93. ),
  94. );
  95. }
  96. return const Center(
  97. child: CircularProgressIndicator(),
  98. );
  99. },
  100. ),
  101. ),
  102. ],
  103. ),
  104. ),
  105. );
  106. }
  107. }
nfeuvbwi

nfeuvbwi1#

首先,你需要停止使用FutureBuilder进行API调用,因为FutureBuilder会自我重建,并在每个变化的状态下调用future函数,因此它会重复调用api,你可以使用bloc或cubit代替。
现在这里是解决方案:
你只需要操纵PageViewBuilder的索引,使PageView的长度是dataList的两倍。在builder中将索引除以2层,并将其传递给dataList并获取数据,现在如果页面索引是偶数,则显示firstName和lastName,否则相应地显示地区和州。
这里我在future函数中使用了一些虚拟数据。
你可以参考下面的代码:

  1. @override
  2. Widget build(BuildContext context) {
  3. return Scaffold(
  4. appBar: AppBar(
  5. title: const Text('Get User Data'),
  6. ),
  7. body: SafeArea(
  8. child: Column(
  9. children: <Widget>[
  10. Expanded(
  11. flex: 8,
  12. child: FutureBuilder<List<dynamic>>(
  13. future: getUserData(),
  14. builder: (context, snapshot) {
  15. if (snapshot.hasData) {
  16. return Padding(
  17. padding: const EdgeInsets.all(8.0),
  18. child: PageView.builder(
  19. controller: PageController(),
  20. itemCount: snapshot.data!.length * 2,
  21. itemBuilder: (context, index) {
  22. bool isEvenIndex = index % 2 == 0;
  23. int i = (index / 2).floor();
  24. String userFirstName =
  25. snapshot.data![i]['user_first_name'];
  26. String userLastName =
  27. snapshot.data![i]['user_last_name'];
  28. String userDistrict =
  29. snapshot.data![i]['user_district'];
  30. String userState = snapshot.data![i]['user_state'];
  31. return Column(
  32. mainAxisAlignment: MainAxisAlignment.center,
  33. children: [
  34. Container(
  35. color: isEvenIndex
  36. ? const Color.fromARGB(255, 231, 229, 229)
  37. : Colors.lightGreen,
  38. child: Text(
  39. '${i + 1}. ${isEvenIndex ? 'First Name: $userFirstName' : 'District: $userDistrict'}',
  40. style: const TextStyle(fontSize: 30),
  41. ),
  42. ),
  43. Container(
  44. color: isEvenIndex
  45. ? const Color.fromARGB(255, 231, 229, 229)
  46. : Colors.lightGreen,
  47. child: Text(
  48. isEvenIndex
  49. ? 'Last Name: $userLastName'
  50. : 'State: $userState',
  51. style: const TextStyle(fontSize: 30),
  52. ),
  53. ),
  54. ],
  55. );
  56. },
  57. ),
  58. );
  59. }
  60. return const Center(
  61. child: CircularProgressIndicator(),
  62. );
  63. },
  64. ),
  65. ),
  66. ],
  67. ),
  68. ),
  69. );
  70. }
展开查看全部

相关问题