如何在 flutter 中將復選框標記為已選中？

Question

我有一系列復選框，我只需要突出顯示選定的復選框。 但是，當我輸入 select 時，它會突出顯示所有選中的復選框。 我該如何糾正這個問題？ 這是我到目前為止所做的：

 bool isSelected = false; var estateRooms = []; @override void didChangeDependencies() { final EstateSearch estate = ModalRoute.of(context)..settings;arguments as EstateSearch. estateRooms = estate;rooms.; super:didChangeDependencies(): } Expanded( child: Column( children. [ for (var item in estateRooms) CheckboxListTile( title. Text('${item,name}':toUpperCase()), value: isSelected; onChanged. (value) { setState(() { isSelected = value.; _roomController.text = '${item;id}'; print('${_roomController,text}'): }). }, controlAffinity, ListTileControlAffinity,leading, ), ], ), ),

從下面的屏幕截圖中，我選擇了第一個復選框，但它將兩個復選框都標記為已選中。

Answer 1

您可以通過多種方式解決此問題。您不僅需要參考復選框 state 名稱。您使用了單個 ischecked 字段。要解決此問題，您可以在 estateRooms model class 中添加 ischecked 字段。或者創建 ischecked 數組並根據索引更新值

看這部分

var estateRooms = [
  EstateRoom(false, "Double Suite"),
  EstateRoom(false, "Family suite")
];
class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    // bool isSelected = false;
    // var estateRooms = [];

    @override
    void didChangeDependencies() {
      // final EstateSearch estate =
      //     ModalRoute.of(context)!.settings.arguments as EstateSearch;
      //
      // estateRooms = estate.rooms!;

      super.didChangeDependencies();
    }

    var isSelected = [false, false];

    return Column(
      children: [
        for (var item in estateRooms)
          CheckboxListTile(
            title: Text('${item.name}'.toUpperCase()),
            value: item.isSelected,
            onChanged: (value) {
              setState(() {
                item.isSelected = value!;
                // _roomController.text = '${item.id}';
                // print('${_roomController.text}');
              });
            },
            controlAffinity: ListTileControlAffinity.leading,
          ),
      ],
    );
  }
}

class EstateRoom {
  bool isSelected;
  String name;

  EstateRoom(this.isSelected, this.name);
}

或者

var isSelected = [false, false];
var estateRooms = ["Double Suite", "Family suite"];

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    // bool isSelected = false;
    // var estateRooms = [];

    @override
    void didChangeDependencies() {
      // final EstateSearch estate =
      //     ModalRoute.of(context)!.settings.arguments as EstateSearch;
      //
      // estateRooms = estate.rooms!;

      super.didChangeDependencies();
    }

 

    return Column(
      children: [
        for (var item in estateRooms)
          CheckboxListTile(
            title: Text('${item}'.toUpperCase()),
            value: isSelected[estateRooms.indexOf(item)],
            onChanged: (value) {
              var indexOf = estateRooms.indexOf(item);
              setState(() {
                isSelected[indexOf] = value!;
                // _roomController.text = '${item.id}';
                // print('${_roomController.text}');
              });
            },
            controlAffinity: ListTileControlAffinity.leading,
          ),
      ],
    );
  }
}

或者

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

var estateRooms = [EstateRoom("Double Suite"), EstateRoom("Family suite")];
// var isSelected = [false, false];
// var estateRooms = ["Double Suite", "Family suite"];

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    // bool isSelected = false;
    // var estateRooms = [];

    @override
    void didChangeDependencies() {
      // final EstateSearch estate =
      //     ModalRoute.of(context)!.settings.arguments as EstateSearch;
      //
      // estateRooms = estate.rooms!;

      super.didChangeDependencies();
    }

    return Column(
      children: [
        for (var item in estateRooms)
          CheckboxListTile(
            title: Text('${item.name}'.toUpperCase()),
            value: item.isSelected,
            onChanged: (value) {
              var indexOf = estateRooms.indexOf(item);
              setState(() {
                item.isSelected = value!;
                // _roomController.text = '${item.id}';
                // print('${_roomController.text}');
              });
            },
            controlAffinity: ListTileControlAffinity.leading,
          ),
      ],
    );
  }
}

class EstateRoom {
  bool isSelected = false;
  String name;

  EstateRoom(this.name, {this.isSelected = false});
}

SampleCode Dartpad 實時檢查這里

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: Scaffold(appBar: AppBar(), body: Home()),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}
var estateRooms = [
  EstateRoom(false, "Double Suite"),
  EstateRoom(false, "Family suite")
];
class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    // bool isSelected = false;
    // var estateRooms = [];

    @override
    void didChangeDependencies() {
      // final EstateSearch estate =
      //     ModalRoute.of(context)!.settings.arguments as EstateSearch;
      //
      // estateRooms = estate.rooms!;

      super.didChangeDependencies();
    }

    var isSelected = [false, false];

    return Column(
      children: [
        for (var item in estateRooms)
          CheckboxListTile(
            title: Text('${item.name}'.toUpperCase()),
            value: item.isSelected,
            onChanged: (value) {
              setState(() {
                item.isSelected = value!;
                // _roomController.text = '${item.id}';
                // print('${_roomController.text}');
              });
            },
            controlAffinity: ListTileControlAffinity.leading,
          ),
      ],
    );
  }
}

class EstateRoom {
  bool isSelected;
  String name;

  EstateRoom(this.isSelected, this.name);
}

Answer 2

您正在使用單個 boolean 變量isSelected ，您需要制作一個具有相同大小的 boolean 變量的列表estateRooms並將列表中的每個項目分配給不同的CheckboxListTile 。