0

我有一个列表并使用我自己设计的自定义复选框单击卡片以指示完成或未完成，方法是使用 setState 将变量更改为 true 或 false

如何使单击一个复选框仅检查该卡？

目前，当我单击一个复选框时，也会选中所有复选框

这是我的飞镖垫： https ://dartpad.dev/f538bee48a18438c25024cbc5eeac14c

我的代码：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: TestPageTwo(),
        ),
      ),
    );
  }
}

class TestPageTwo extends StatefulWidget {
  @override
  _TestPageTwoState createState() => _TestPageTwoState();
}

class _TestPageTwoState extends State<TestPageTwo> {
  bool isComplete = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Task List'),
        ),
        body: ListView.builder(
          padding: EdgeInsets.all(15.0),
          shrinkWrap: true,
          itemCount: taskList.length,
          itemBuilder: (context, index) =>
              _buildTaskCard(index, taskList[index]),
        ));
  }

  Widget _buildTaskCard(int itemIndex, TaskModel task) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 5.0),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10.0))),
      elevation: 5.0,
      child: InkWell(
        splashColor: Colors.blue.withAlpha(30),
        onTap: () {},
        child: Container(
          width: double.infinity,
          height: 70,
          child: Column(
            children: [
              ListTile(
                leading: GestureDetector(
                  onTap: () {
                    setState(() {
                      isComplete = !isComplete;
                    });
                    print(isComplete);
                  },
                  child: isComplete
                      ? Icon(
                          Icons.check_circle_outline_outlined,
                          color: Colors.blue,
                          size: 40,
                        )
                      : Icon(
                          Icons.radio_button_unchecked,
                          color: Colors.grey,
                          size: 40,
                        ),
                ),
                title: Text(
                  task.taskTitle,
                  style: TextStyle(fontSize: 13.0),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                subtitle: Text(
                  task.taskCategory,
                  style: TextStyle(fontSize: 10.0),
                ),
                dense: true,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class TaskModel {
  final String taskId,
      taskStatus,
      taskTitle,
      taskCategory;

  TaskModel(
      {this.taskId,
      this.taskStatus,
      this.taskTitle,
      this.taskCategory});
}

List<TaskModel> taskList = [
  TaskModel(
      taskId: 'task00001',
      taskStatus: 'Incomplete',
      taskTitle: 'Task 00001',
      taskCategory: 'A0001'),
  TaskModel(
      taskId: 'task00002',
      taskStatus: 'Completed',
      taskTitle: 'Task 00002',
      taskCategory: 'A0002'),
  TaskModel(
      taskId: 'task00003',
      taskStatus: 'Incomplete',
      taskTitle: 'Task 00003',
      taskCategory: 'A0003',),
  TaskModel(
      taskId: 'task00004',
      taskStatus: 'Incomplete',
      taskTitle: 'Task 00004',
      taskCategory: 'A0004',),
];
4

1 回答 1

1

试试这个

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: TestPageTwo(),
        ),
      ),
    );
  }
}

class TestPageTwo extends StatefulWidget {
  @override
  _TestPageTwoState createState() => _TestPageTwoState();
}

class _TestPageTwoState extends State<TestPageTwo> {
  bool isComplete = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Task List'),
        ),
        body: ListView.builder(
          padding: EdgeInsets.all(15.0),
          shrinkWrap: true,
          itemCount: taskList.length,
          itemBuilder: (context, index) =>
              _buildTaskCard(index, taskList[index]),
        ));
  }

  Widget _buildTaskCard(int itemIndex, TaskModel task) {
    return Card(
      margin: EdgeInsets.symmetric(vertical: 5.0),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10.0))),
      elevation: 5.0,
      child: InkWell(
        splashColor: Colors.blue.withAlpha(30),
        onTap: () {},
        child: Container(
          width: double.infinity,
          height: 70,
          child: Column(
            children: [
              ListTile(
                leading: GestureDetector(
                  onTap: () {
                    setState(() {
                      task.taskStatus = !task.taskStatus;
                    });
                    print(isComplete);
                  },
                  child: task.taskStatus
                      ? Icon(
                          Icons.check_circle_outline_outlined,
                          color: Colors.blue,
                          size: 40,
                        )
                      : Icon(
                          Icons.radio_button_unchecked,
                          color: Colors.grey,
                          size: 40,
                        ),
                ),
                title: Text(
                  task.taskTitle,
                  style: TextStyle(fontSize: 13.0),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                subtitle: Text(
                  task.taskCategory,
                  style: TextStyle(fontSize: 10.0),
                ),
                dense: true,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class TaskModel {
  final String taskId,
      taskTitle,
      taskCategory;
  bool taskStatus = false;


  TaskModel(
      {this.taskId,
      this.taskStatus,
      this.taskTitle,
      this.taskCategory});
}

List<TaskModel> taskList = [
  TaskModel(
      taskId: 'task00001',
      taskStatus: false,
      taskTitle: 'Task 00001',
      taskCategory: 'A0001'),
  TaskModel(
      taskId: 'task00002',
      taskStatus: true,
      taskTitle: 'Task 00002',
      taskCategory: 'A0002'),
  TaskModel(
      taskId: 'task00003',
      taskStatus: false,
      taskTitle: 'Task 00003',
      taskCategory: 'A0003',),
  TaskModel(
      taskId: 'task00004',
      taskStatus: false,
      taskTitle: 'Task 00004',
      taskCategory: 'A0004',),
];
于 2020-12-03T10:47:00.183 回答