Flutter新手求教：如何用ListView优化设置选项界面适配数据链接？

Hey there! Nice job getting your settings UI up and running with Row and Column—you’re already thinking in the right direction by planning for future Firebase integration. Switching to ListView is absolutely the way to go for scalability, and we can make this code much cleaner and maintainable at the same time. Let’s break down the improvements:

问题分析 #

Your current code works, but it has a lot of repeated Row and Divider code. This gets messy fast if you add more settings later, and it’s not easy to dynamically populate data from Firebase (or any backend) since everything is hardcoded.

优化方案1：用ListView.separated+复用组件 #

First, let’s extract each setting row into a reusable widget—this way you only write the layout logic once. Then we’ll use ListView.separated to handle the dividers automatically, which is more efficient than manually adding Dividers between Rows.

Here’s the refactored code:

class datosUsuarios extends StatelessWidget {
  // 模拟后续从Firebase获取的数据列表
  final List<Map<String, dynamic>> userSettings = [
    {
      'icon': Icons.person,
      'title': 'Nombre:',
      'value': 'Your Name',
    },
    {
      'icon': Icons.mail,
      'title': 'Correo',
      'value': 'Jefferson@mpytx.com',
    },
    {
      'icon': Icons.phone,
      'title': 'Telefono',
      'value': '+52 9802638955',
    },
    {
      'icon': Icons.info,
      'title': 'Version',
      'value': 'Beta 0.1.0.',
    },
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.symmetric(vertical: 16),
      itemCount: userSettings.length,
      // 生成每个列表项
      itemBuilder: (context, index) {
        final setting = userSettings[index];
        return SettingItem(
          icon: setting['icon'] as IconData,
          title: setting['title'] as String,
          value: setting['value'] as String,
        );
      },
      // 生成分隔线
      separatorBuilder: (context, index) {
        return const Divider(
          height: 25,
          color: Colors.grey,
          indent: 5,
          endIndent: 5,
        );
      },
    );
  }
}

// 复用的设置项组件
class SettingItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final String value;

  const SettingItem({
    super.key,
    required this.icon,
    required this.title,
    required this.value,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 5),
      child: Row(
        children: [
          Icon(icon, color: Colors.blueAccent),
          const SizedBox(width: 5),
          Text(title),
          const SizedBox(width: 5),
          Text(
            value,
            style: const TextStyle(color: Colors.grey),
          ),
        ],
      ),
    );
  }
}

优化点说明 #

• Reusable Component: The SettingItem widget lets you update the look of all settings rows in one place—no more changing code 4+ times if you want to adjust spacing or colors.
• Dynamic Data Ready: The userSettings list is structured to easily replace hardcoded values with data from Firebase. Later, you can fetch this list using FutureBuilder or StreamBuilder to pull live user data.
• Efficient Layout: ListView.separated only builds items that are visible on screen (lazy loading), which is better for performance than a Column inside a SingleChildScrollView (which builds all items at once).

更简洁的替代：使用ListTile #

If you want to simplify even more, Flutter’s built-in ListTile component is perfect for this pattern—it has leading, title, and subtitle properties that match your layout:

class datosUsuarios extends StatelessWidget {
  final List<Map<String, dynamic>> userSettings = [
    {
      'icon': Icons.person,
      'title': 'Nombre:',
      'value': 'Your Name',
    },
    {
      'icon': Icons.mail,
      'title': 'Correo',
      'value': 'Jefferson@mpytx.com',
    },
    {
      'icon': Icons.phone,
      'title': 'Telefono',
      'value': '+52 9802638955',
    },
    {
      'icon': Icons.info,
      'title': 'Version',
      'value': 'Beta 0.1.0.',
    },
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.all(8),
      itemCount: userSettings.length,
      itemBuilder: (context, index) {
        final setting = userSettings[index];
        return ListTile(
          leading: Icon(setting['icon'] as IconData, color: Colors.blueAccent),
          title: Text(setting['title'] as String),
          subtitle: Text(
            setting['value'] as String,
            style: const TextStyle(color: Colors.grey),
          ),
          contentPadding: const EdgeInsets.symmetric(horizontal: 5),
        );
      },
      separatorBuilder: (context, index) => const Divider(height: 25, color: Colors.grey),
    );
  }
}

This cuts down on even more custom code, while still keeping everything flexible for future Firebase integration.

后续对接Firebase的小提示 #

When you’re ready to pull data from Firebase, you can wrap your ListView in a StreamBuilder (for real-time updates) or FutureBuilder (for one-time fetch):

StreamBuilder<User>(
  stream: FirebaseAuth.instance.authStateChanges(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final user = snapshot.data!;
      // Fetch additional user data from Firestore here
      return ListView.separated(...); // Use user data to populate settings
    }
    return const CircularProgressIndicator();
  },
)

This way, your UI will automatically update when the user’s data changes in Firebase.

内容的提问来源于stack exchange，提问作者Jefferson Santos Angulo