如何从卡选项列表中选择一张卡

Question

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:haufa/controllers/report_controller.dart';
import 'package:haufa/pages/Tabbar/homescreen_tabbar.dart';
class ReportSituationSelectRiskLevel extends StatefulWidget {
const ReportSituationSelectRiskLevel({Key? key}) : super(key: key);
@override
State<ReportSituationSelectRiskLevel> createState() =>
_ReportSituationSelectRiskLevelState();
}
bool scenarioOption = true;
class _ReportSituationSelectRiskLevelState
extends State<ReportSituationSelectRiskLevel> {
final controller = ReportController();
final ScrollController _controller = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: false,
appBar: AppBar(
toolbarHeight: 0,
elevation: 0,
backgroundColor: Colors.transparent,
),
backgroundColor: Colors.white,
body: Column(
children: [
SizedBox(
height: 48.h,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(width: 60.w),
Text(
"Verify situation",
style: GoogleFonts.inter(
fontSize: 18,
fontWeight: FontWeight.w500,
color: Color(0xFFF374151),
),
),
IconButton(
splashRadius: 21,
color: Color(0xFFF9CA3AF),
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.close),
),
],
),
SizedBox(
height: 28.h,
),
Text(
"Select a scenario",
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w400,
color: Color(0xFFF374151),
),
),
SizedBox(
height: 24.h,
),
// #### Here is where the iteration problem occured.
Container(
height: 475.h,
child: Scrollbar(
child: GridView.builder(
padding: EdgeInsets.only(left: 10.w, right: 10.w),
itemCount: 12,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context, index) => scenarioCard(index),
)),
),
SizedBox(
height: 24.h,
),
Padding(
padding: const EdgeInsets.only(left: 30.0, right: 30),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 2,
shadowColor: Color(0xfff0000000D),
primary: Color(0xFFFD9D9D9),
minimumSize: Size.fromHeight(37.53),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(6),
),
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeScreenTabBar()),
);
// if (_formKey.currentState!.validate()) {
//   _formKey.currentState!.save();
//   KeyboardUtil.hideKeyboard(context);
// }
},
child: Text(
"Next",
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xFFF8C8C8C),
),
),
),
),
],
),
);
}
Widget scenarioCard(int index) => Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: Container(
height: 175.h,
width: 149.w,
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(right: 100.0),
child: Radio<bool?>(
value: controller.reportCards[index].selectedValue,
groupValue: scenarioOption,
onChanged: (value) {
setState(
() {
scenarioOption = value!;
},
);
},
),
),
SvgPicture.asset(controller.reportCards[index].svgImage),
SizedBox(
height: 8.h,
),
Text(
controller.reportCards[index].title,
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Color(0xFFF434343),
),
),
// Text("data")
],
),
),
);
}

Answer 1

不使用bool，而是可以使用int 来选择单个项目

int? selectedIndex ;

Padding(
padding: const EdgeInsets.only(right: 100.0),
child: Radio<int?>(
value: index,
groupValue: selectedIndex,
onChanged: (value) {
setState(
() {
selectedIndex = value;
},
);
},
),
),

Radio也可以与模型或其他数据类型一起使用。

Answer 2

要使卡片可点击，您必须将其包装在InkWell小部件中：

InkWell(
child: Card(...),
onTap:(){...}
)

https://api.flutter.dev/flutter/material/InkWell-class.html

然而，在您的代码中，您有这个注释// #### Here is where the iteration problem occured.，但您没有说明问题出在哪里。