Flutter/VSCode中点击复选框时隐藏Slider和文本的实现方法

需求 #

刚接触Flutter，首次使用Visibility组件，需要实现：

• 默认隐藏「Congratulations」文本
• 点击「I am graduating this semester」复选框时，显示该文本，同时隐藏Slider组件及上方的提示文字

问题分析 #

你的代码存在以下关键问题：

• Visibility组件未指定visible属性：默认visible为true，导致「Congratulations」初始状态就显示，不符合需求
• Slider及提示文字未被Visibility包裹：无法通过复选框控制其隐藏
• 冗余的_isVisible变量：无需额外变量，直接复用复选框的_isSelected状态即可完成双组件的显示隐藏控制

修改方案 #

1. 删除多余的bool _isVisible = true;变量
2. 给「Congratulations」的Visibility添加visible: _isSelected属性，仅在复选框选中时显示
3. 将Slider和其上方的提示文字统一包裹在Visibility中，设置visible: !_isSelected，复选框选中时隐藏这部分内容
4. 简化复选框的状态更新逻辑，仅维护_isSelected变量

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class LabeledCheckbox extends StatelessWidget {
  const LabeledCheckbox({
    super.key,
    required this.label,
    required this.padding,
    required this.value,
    required this.onChanged,
  });

  final String label;
  final EdgeInsets padding;
  final bool value;
  final ValueChanged<bool> onChanged;

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

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  bool _isSelected = false;
  double _currentSliderValue = 0;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            decoration: const InputDecoration(
              hintText: 'First Name',
            ),
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter First Name';
              }
              return null;
            },
          ),
          TextFormField(
            decoration: const InputDecoration(
              hintText: 'Last Name',
            ),
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Please Enter Last Name';
              }
              return null;
            },
          ),
          CheckboxListTile(
            title: const Text("I am graduating this semester"),
            value: _isSelected,
            onChanged: (value) {
              setState(() {
                _isSelected = value!;
              });
            },
          ),
          // 控制Congratulations文本的显示，仅选中复选框时显示
          Visibility(
            visible: _isSelected,
            child: Text(
              "Congratulations!!",
              style: TextStyle(fontSize: 30, color: Colors.green),
            ),
          ),
          // 控制Slider及提示文字的显示，未选中复选框时显示
          Visibility(
            visible: !_isSelected,
            child: Column(
              children: [
                Center(
                  child: Text("How many classes are you planning to take this semester"),
                ),
                Slider(
                  label: _currentSliderValue.round().toString(),
                  value: _currentSliderValue,
                  max: 8,
                  divisions: 8,
                  onChanged: (value) {
                    setState(() {
                      _currentSliderValue = value;
                    });
                  },
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Thank you for submitting the survey!')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Deborah