我对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'),
),
),
],
),
);
}
}
2条答案
按热度按时间watbbzwu1#
你可以使用
_isVisible boolean variable
来得到结果:gg58donl2#
只要重构到这个,并避免在这种情况下的可见性小部件
您不需要使用_isVisible变量,因为您的条件基于_isSelected值,并且在您想要显示小部件或不显示小部件的情况下,更多地使用可见性,但在您的情况下,您可以显示文本小部件或滑块小部件,因此如果..else工作得更好,符合要求