如何在Flutter/VSCODE上按下复选框时隐藏滑块和文本

8yoxcaq7  于 2023-04-22  发布在  Flutter
关注(0)|答案(2)|浏览(97)

我对Flutter还是个新手。我从来没有使用过Visibility类。我在代码中乱用了它,但我似乎无法让它工作,直到按下复选框才能隐藏“祝贺”,并在按下确切的复选框时使滑块消失。我已经包含了一个视频,说明我需要完成什么。请帮助!

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;
   bool _isVisible = true;


  @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!; 
              _isVisible = !_isVisible;
              
                    });  
                  }, 
          ),

          Visibility(
              child:  Text("Congratulations!!",
                style: TextStyle(fontSize: 30, color: Colors.green))),
          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: () {
                
                // Validate will return true if the form is valid, or false if
                // the form is invalid.
                if (_formKey.currentState!.validate()) {
                   ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Thank you for submitting the survey!')),
                  );
                  // Process data.
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
  
      
    ); 
  }
}

Link to Video example

watbbzwu

watbbzwu1#

你可以使用_isVisible boolean variable来得到结果:

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

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

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

  bool _isSelected = false;
  double _currentSliderValue = 0;
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(18.0),
            child: TextFormField(
              decoration: const InputDecoration(
                hintText: 'First Name',
              ),
              validator: (String? value) {
                if (value == null || value.isEmpty) {
                  return 'Please Enter First Name';
                }
                return null;
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left:18.0,top: 5,right: 18),
            child: TextFormField(
              decoration: const InputDecoration(
                hintText: 'Last Name',
              ),
              validator: (String? value) {
                if (value == null || value.isEmpty) {
                  return 'Please Enter Last Name';
                }
                return null;
              },
            ),
          ),
          CheckboxListTile(
            controlAffinity: ListTileControlAffinity.leading,
            title: const Text("I am graduating this semester"),
            value: _isSelected,
            onChanged: (value) {
              setState(() {
                _isSelected = value!;
                _isVisible = !_isVisible;
              });
            },
          ),
            if (_isSelected)
            const Padding(
              padding: EdgeInsets.only(left: 18.0),
              child: Text(
                "Congratulations!!",
                style: TextStyle(fontSize: 30, color: Colors.green),
              ),
            ),
          if (_isVisible)
            const Center(
                child: Text(
                    "How many classes are you planning to take this semester")),
          if (_isVisible)
            Slider(
              label: _currentSliderValue.round().toString(),
              value: _currentSliderValue,
              max: 8,
              divisions: 8,
              onChanged: (value) {
                setState(() {
                  _currentSliderValue = value;
                });
              },
            ),  
       Padding(
            padding: const EdgeInsets.only(top: 26.0,left: 18),
            child: Center(
              child: ElevatedButton(
                onPressed: () {
                  // Validate will return true if the form is valid, or false if
                  // the form is invalid.
                  if (_formKey.currentState!.validate()) {
                     ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Thank you for submitting the survey!')),
                    );
                    // Process data.
                  }
                },
                child: const Text('Submit'),
              ),
            ),
          ),
        ],
      ),  
    ); 
  }
}
gg58donl

gg58donl2#

只要重构到这个,并避免在这种情况下的可见性小部件

if(_isSelected)
  Text("Congratulations!!",
                style: TextStyle(fontSize: 30, color: Colors.green))),
          Center(
          child: Text("How many classes are you planning to take this semester") else
          Slider(
          label: _currentSliderValue.round().toString(),
          value: _currentSliderValue,
          max: 8,
          divisions: 8,
          onChanged: (value) {
          setState(() {
            _currentSliderValue = value;
          });
        },
      ),

您不需要使用_isVisible变量,因为您的条件基于_isSelected值,并且在您想要显示小部件或不显示小部件的情况下,更多地使用可见性,但在您的情况下,您可以显示文本小部件或滑块小部件,因此如果..else工作得更好,符合要求

相关问题