Flutter PageView实现MySQL单条用户数据分屏展示需求及代码修正

要实现每个用户数据分两屏展示（姓名页+地区页），核心是调整PageView.builder的页面数量和内容逻辑：

1. 调整页面总数：每个用户对应2个页面，所以itemCount设为用户列表长度的2倍
2. 区分页面类型：根据当前页面索引判断是展示用户姓名，还是地区信息
3. 对应用户数据：通过页面索引计算出所属的用户索引（偶数页对应index~/2，奇数页对应(index-1)~/2）

修改后的完整代码：

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) {
                    final userList = snapshot.data!;
                    return Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: PageView.builder(
                        controller: pageController,
                        // 每个用户对应2个页面，总页数翻倍
                        itemCount: userList.length * 2,
                        itemBuilder: (context, pageIndex) {
                          // 计算当前页面所属的用户索引
                          final userIndex = pageIndex ~/ 2;
                          final user = userList[userIndex];
                          final userFirstName = user['user_first_name'];
                          final userLastName = user['user_last_name'];
                          final userDistrict = user['user_district'];
                          final userState = user['user_state'];

                          // 判断当前是姓名页还是地区页
                          if (pageIndex % 2 == 0) {
                            // 偶数页：展示姓名信息
                            return Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Container(
                                  color: const Color.fromARGB(255, 231, 229, 229),
                                  padding: const EdgeInsets.all(16),
                                  child: Text(
                                    '${userIndex+1}- First Name: $userFirstName',
                                    style: const TextStyle(fontSize: 30),
                                  ),
                                ),
                                const SizedBox(height: 16),
                                Container(
                                  color: const Color.fromARGB(255, 231, 229, 229),
                                  padding: const EdgeInsets.all(16),
                                  child: Text(
                                    'Last Name: $userLastName',
                                    style: const TextStyle(fontSize: 30),
                                  ),
                                ),
                              ],
                            );
                          } else {
                            // 奇数页：展示地区信息
                            return Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Container(
                                  color: Colors.lightGreen,
                                  padding: const EdgeInsets.all(16),
                                  child: Text(
                                    '${userIndex+1}- District: $userDistrict',
                                    style: const TextStyle(fontSize: 30),
                                  ),
                                ),
                                const SizedBox(height: 16),
                                Container(
                                  color: Colors.lightGreen,
                                  padding: const EdgeInsets.all(16),
                                  child: Text(
                                    'State: $userState',
                                    style: const TextStyle(fontSize: 30),
                                  ),
                                ),
                              ],
                            );
                          }
                        },
                      ),
                    );
                  }
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键修改点说明： #

• itemCount：从userList.length改为userList.length * 2，确保每个用户有两个页面
• 用户索引计算：用pageIndex ~/ 2（整数除法）得到当前页面对应的用户
• 页面内容分支：通过pageIndex % 2 == 0判断是展示姓名页还是地区页
• 优化布局：添加mainAxisAlignment: MainAxisAlignment.center让内容居中，增加padding提升视觉效果

内容的提问来源于stack exchange，提问作者Ajit Kumar Dutta