flutter - 当您仅选择其中一个复选框时,将选中每个复选框

标签 flutter dart flutter-layout

我创建了一个按钮,该按钮允许用户添加信用卡,这些卡已添加到Listview.builder中。
问题是,当我有多张卡并且选择了一张卡时,它选择了所有卡,这可能是状态问题,但是我还没有找到如何修复它,这是dartpad:[dartpad] [1]我的代码,如果您可以检查它,或者告诉我我在做什么错,可能是在buildBody内部失败了,但是我不确定,我还没有成功找到解决方案。
您只需在“添加卡”上点按两次,然后选中其中的一个即可看到,两者都将被选中。
由于某种原因,该链接无法通过快捷方式工作,因此此处为https://dartpad.dev/b0aaaa2901aa3ac67426d9bdd885abb1:

最佳答案

我修改了您的dartpad代码,以获取您尝试实现的行为:
下面提供了代码:
问题是您为两个bool使用相同的_isSelectedCheckboxes

import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: InformationsBancairesPage(),
        ),
      ),
    );
  }
}

class InformationsBancairesPage extends StatefulWidget {
  @override
  _InformationsBancairesPageState createState() =>
      _InformationsBancairesPageState();
}

class _InformationsBancairesPageState extends State<InformationsBancairesPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(
          'Payer ou recevoir un paiement'.toUpperCase(),
          style: TextStyle(fontSize: 19, color: Colors.black),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.black),
      ),
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: ListView(
          children: <Widget>[
            InputAddCarte(),
          ],
        ),
      ),
    );
  }
}

class InputAddCarte extends StatefulWidget {
  @override
  _InputAddCarteState createState() => _InputAddCarteState();
}

class _InputAddCarteState extends State<InputAddCarte> {
  // create a list of bool values for your checkboxes
  List<bool> _selectedList = [false, false];
  int value = 0;

  void initState() {
    super.initState();
  }

  _addCard() {
    setState(() {
      value = value + 1;
      print(value);
    });
  }

  Widget buildBody(BuildContext context, int indexClicked) {
    return LabeledCheckbox(
      label: 'Card credit',
      padding: const EdgeInsets.symmetric(horizontal: 20.0),
      // pass the value of the checkbox at the selected index
      value: _selectedList[indexClicked],
      onChanged: (bool newValue) {
        setState(() {
      // pass the value of the checkbox at the selected index
          _selectedList[indexClicked] = newValue;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        ButtonTheme(
          minWidth: 250,
          child: RaisedButton(
            color: Color(0xff00cc99),
            child: Text(
              'ADD A CARD'.toUpperCase(),
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            onPressed: _addCard,
          ),
        ),
        // Show the cards when you press 'Ajouter une carte'
        ListView.builder(
          shrinkWrap: true,
          itemCount: this.value,
          itemBuilder: (BuildContext context, int value) {
            // display two cards maximum
            if (value < 2) {
             // pass the index of the selected checkbox
              return buildBody(context, value);
            }
            return Container();
          },
        ),
        ButtonTheme(
          minWidth: 250,
          child: RaisedButton(
            color: Colors.orange,
            child: Text(
              'Delete a card'.toUpperCase(),
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            onPressed: () {},
          ),
        )
      ],
    );
  }
}

// Create custom checkbox for the list of cards
class LabeledCheckbox extends StatelessWidget {
  const LabeledCheckbox({
    this.label,
    this.padding,
    this.value,
    this.onChanged,
  });

  final String label;
  final EdgeInsets padding;
  final bool value;
  final Function onChanged;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        onChanged(!value);
      },
      child: Padding(
        padding: padding,
        child: Row(
          children: <Widget>[
            Expanded(child: Text(label)),
            Checkbox(
              value: value,
              onChanged: (bool newValue) {
                onChanged(newValue);
              },
            ),
          ],
        ),
      ),
    );
  }
}

关于flutter - 当您仅选择其中一个复选框时,将选中每个复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62998649/

相关文章:

flutter - 如何在 flutter 中创建无限网格?

dart - 使用通用 bloc 提供程序时 bloc 不会被初始化

dart - ExpansionTile 不保持状态

dart - 如何在 Dart 中添加 HTML 实体?

flutter - Dart 如何制作 MyClass.of(context) 方法

flutter - 在BoxDecoration图像上强制裁剪

arrays - 如何形成具有动态长度数组的json主体?

dart - flutter : Where is the title of Material App used?

android - 在底部导航 flutter 后面扩展容器

dart - 如何只渲染一个 Widget setState