没有选中复选框时如何禁用按钮？ - 颤振

Question

在这里，我从商家列表中创建了一个 ListView.builder 和一个 length。 NEXT 按钮显示在此 dart 文件中。

import 'package:flutter/material.dart';
import 'package:untitled/constants.dart';
import 'package:untitled/text_checkbox.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            "Test",
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.black,
        ),
        body: Container(
          padding: const EdgeInsets.only(
            top: 20,
          ),
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 35),
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height * 0.3,
                child: ListView.builder(
                  itemCount: Merchants.merchants.length,
                  itemBuilder: (context, index) {
                    return const TextCheckbox();
                  },
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  print ('NEXT');
                },
                child: const Text('NEXT'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

这是来自TextCheckbox的代码

import 'package:untitled/constants.dart';

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

  @override
  _TextCheckboxState createState() => _TextCheckboxState();
}

class _TextCheckboxState extends State<TextCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5),
      child: Row(
        children: [
          InkWell(
            onTap: () {
              setState(() {
                isChecked = !isChecked;
              });
            },
            child: Container(
              width: 15,
              height: 15,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(3),
                border: Border.all(
                    width: isChecked == false ? 1 : 0,
                    color: isChecked == false ? const Color(0xff7D7D7D) : const Color(0xFF31708F)),
                color: isChecked == false ? const Color(0xffffffff) : const Color(0xFF31708F),
                shape: BoxShape.rectangle,
              ),
              child: isChecked == false
                  ? const Text("")
                  : const Icon(
                Icons.check,
                size: 15,
                color: Color(0xffffffff),
              ),
            ),
          ),
          const Spacer(),
          Text(Merchants.randomMerchant),
        ],
      ),
    );
  }
}

商家列表是从另一个名为常量的 dart 文件中调用的。

class Merchants {
  static List<String> merchants = ['Bang Ongot', 'Bang Kotan', 'Bang Bangtut', 'Bang BCA'];
  static var randomMerchant = (merchants.toList()..shuffle()).last;
}

我想问的是，如果没有选中复选框，如何禁用 NEXT 按钮？

Answer 1

试试这个：

让你的TextCheckbox 喜欢这样

class TextCheckbox extends StatefulWidget {
  final ValueChanged<bool> onChanged; 
  const TextCheckbox({Key? key}) : super(key: key);

  @override
  _TextCheckboxState createState() => _TextCheckboxState();
}

class _TextCheckboxState extends State<TextCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5),
      child: Row(
        children: [
          InkWell(
            onTap: () {
              setState(() {
                isChecked = !isChecked;
              });
              widget.onChanged(isChecked);
            },
            child: Container(
              width: 15,
              height: 15,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(3),
                border: Border.all(
                    width: isChecked == false ? 1 : 0,
                    color: isChecked == false ? const Color(0xff7D7D7D) : const Color(0xFF31708F)),
                color: isChecked == false ? const Color(0xffffffff) : const Color(0xFF31708F),
                shape: BoxShape.rectangle,
              ),
              child: isChecked == false
                  ? const Text("")
                  : const Icon(
                Icons.check,
                size: 15,
                color: Color(0xffffffff),
              ),
            ),
          ),
          const Spacer(),
          Text(Merchants.randomMerchant),
        ],
      ),
    );
  }
}

而你的HomeScreen 是这样的：

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  int numberOfChecks = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text(
            "Test",
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.black,
        ),
        body: Container(
          padding: const EdgeInsets.only(
            top: 20,
          ),
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 35),
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height * 0.3,
                child: ListView.builder(
                  itemCount: Merchants.merchants.length,
                  itemBuilder: (context, index) {
                    return TextCheckbox(
                      onChanged: (value){
                        setState((){
                           value ? numberOfChecks++ : numberOfChecks--;
                        });
                      }
                    );
                  },
                ),
              ),
              ElevatedButton(
                onPressed: numberOfChecks == 0 ? null : () {
                  print ('NEXT');
                },
                child: const Text('NEXT'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

像这样设置 ElevatedButton 启用值：

ElevatedButton(
            enabled: isChecked
            onPressed: () {
              print ('NEXT');
            },
            child: const Text('NEXT'),
          )

Answer 3

你应该这样做：

int totalNumberOfCheckedTextBoxes = 0;

      ElevatedButton(
        onPressed: totalNumberOfCheckedTextBoxes > 0 ? () {
          print ('NEXT');
        } : null,
        child: const Text('NEXT'),
      )

当复选框被选中或取消选中时增加/减少totalNumberOfCheckedTextBoxes的值