列表视图的Flutter单选

cld4siwp  于 2023-03-24  发布在  Flutter
关注(0)|答案(1)|浏览(135)

我试图为我的flutter应用程序创建一个单一选择列表视图。我希望它看起来像这样:

我尝试了很多不同的方法,但没有一个能完全匹配这张图片。这张图片来自另一个关于同一问题的reddit问题,但是代码已经过时了,我不知道如何修复它
如果有人想看对方的代码,这里是链接:Single Selection for ListView Flutter .
我真的需要帮助,因为我是一个新的Flutter,不知道如何很好地使用它。谢谢!

ve7v8dk2

ve7v8dk21#

您可以将ListTileStatefuWidget一起使用,以跟踪从List选项中选择的项目。

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Choice> items = const [
    Choice('Option 1', 'A'),
    Choice('Option 2', 'B'),
    Choice('Option 3', 'C'),
  ];

  int? _selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (_, index) {
            return Card(
              child: ListTile(
                leading: Text(items[index].label),
                title: Text(items[index].name),
                trailing:
                    _selectedIndex == index ? const Icon(Icons.check) : null,
                onTap: () {
                  setState(() {
                    if (_selectedIndex == index) {
                      _selectedIndex = null;
                    } else {
                      _selectedIndex = index;
                    }
                  });
                },
                selected: _selectedIndex == index,
                selectedTileColor: Colors.deepPurple,
                selectedColor: Colors.white,
              ),
            );
          }),
    ));
  }
}

class Choice {
  final String name;
  final String label;

  const Choice(this.name, this.label);
}

相关问题