Flutter列表添加多组图标与按钮问题求助

你当前的代码仅在body中放置了单个ListTile，因此只能显示一组图标和按钮。要实现多组条目，需用ListView作为容器，在其中添加多个ListTile（或用ListView.builder实现动态列表）。以下是修改后的完整代码：

import 'package:flutter/material.dart';

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
        elevation: 10,
        backgroundColor: const Color(0XFF82B58D),
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        children: const [
          // 第一组条目
          ListTile(
            leading: Icon(Icons.notifications),
            title: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xff6ae792),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
              ),
              onPressed: () {},
              child: Text('Reminders'),
            ),
          ),
          // 第二组条目
          ListTile(
            leading: Icon(Icons.account_circle),
            title: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xff6ae792),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
              ),
              onPressed: () {},
              child: Text('Account'),
            ),
          ),
          // 第三组条目
          ListTile(
            leading: Icon(Icons.security),
            title: ElevatedButton(
              style: ElevatedButton.styleFrom(
                backgroundColor: Color(0xff6ae792),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
              ),
              onPressed: () {},
              child: Text('Privacy'),
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明： #

• 将body的直接子组件从单个ListTile改为ListView，ListView可容纳多个子组件，实现滚动列表效果
• 在ListView的children数组中添加多个ListTile，每个ListTile对应一组图标和按钮
• 调整类名命名规范（settings_screen改为SettingsScreen），符合Dart大驼峰命名习惯
• 添加padding优化列表上下间距

若条目数量较多，推荐使用ListView.builder优化性能，示例如下：

body: ListView.builder(
  padding: const EdgeInsets.symmetric(vertical: 8.0),
  itemCount: 3, // 条目数量
  itemBuilder: (context, index) {
    // 根据index动态生成图标和文字
    final iconList = [Icons.notifications, Icons.account_circle, Icons.security];
    final titleList = ['Reminders', 'Account', 'Privacy'];
    
    return ListTile(
      leading: Icon(iconList[index]),
      title: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: const Color(0xff6ae792),
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30.0),
          ),
        ),
        onPressed: () {},
        child: Text(titleList[index]),
      ),
    );
  },
),

内容的提问来源于stack exchange，提问作者Kanishka Ramesh