英文:
Flutter Single Selection for ListView
问题
我正在尝试为我的Flutter应用程序创建一个单选列表视图。我希望它看起来像这样：
我尝试了许多不同的方法，但没有一个完全匹配这个图像。这个图像来自另一个Reddit问题，涉及相同的问题，但是代码已过时，我不知道如何修复它。
如果有人想查看其他人的代码，这是链接：https://stackoverflow.com/questions/62499593/single-selection-for-listview-flutter。
我真的需要帮助，因为我对Flutter还不太熟悉，不太懂如何使用它。谢谢！
1: https://i.stack.imgur.com/AjlQs.jpg
英文:
I am trying to create a single selection list view for my flutter application. I want it to look something like this:
I have tried many different ways of doing it, but none have matched this image exactly. This image is from another reddit question regarding the same issue, however the code is outdated and I don't know how to fix it.
Here is the link if anyone wants to look at the other person's code: https://stackoverflow.com/questions/62499593/single-selection-for-listview-flutter.
I really need help with this as I am pretty new to Flutter and don't know how to use it that well. Thanks!
答案1
得分: 2
你可以使用ListTile与StatefuWidget来跟踪从选择列表中选定的项目。
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);
}
英文:
You can use ListTile with StatefuWidget to keep track of selected item from List of choices.
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);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论