我的应用启动后,它将立即显示一个按钮。按下此按钮后,我想在同一按钮内建立一个滑块来控制该声音的音量。
我需要做的只是使此滑块出现,而不是控制音量的机制。
我要达到的目标在这里..
我的按钮代码
void main() => runApp(Home());
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "RelaX",
home: Container(
child: Scaffold(
appBar: AppBar(
elevation: 20.0,
backgroundColor: Color(0xFF001E3D),
title: Text(
'Relax',
style: GoogleFonts.raleway(
fontSize: 30.0,
color: Color(0xFF55b9f3),
),
),
centerTitle: true,
),
body: Column(
children: <Widget>[
RaisedButton(
child: Text("View Slider"),
onPressed: () => print("view slider")),
],
),
),
),
);
}
}
您可以使用“可见性”小部件来设置滑块的可见性。请参见下面的代码。我将Container和Inkwell一起使用,以实现与RaisedButton相同的效果。
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
double _currentSliderValue = 0;
bool _sliderVisible = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Raised Button"),
),
body: Center(
child: ClipRRect(
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
child: Container(
decoration: BoxDecoration(
color: Colors.blue[200],
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
),
child: Material(
elevation: 2,
child: InkWell(
onTap: () {
setState(() {
_sliderVisible = !_sliderVisible;
});
},
child: Container(
width: 125.0,
height: 125.0,
child: Column(
children: [
const SizedBox(
height: 15,
),
Icon(
Icons.nightlight_round,
color: Colors.indigo[900],
size: 48,
),
const SizedBox(
height: 5,
),
Visibility(
visible: _sliderVisible,
child: Slider(
value: _currentSliderValue,
min: 0,
max: 10,
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
activeColor: Colors.indigo[900],
inactiveColor: Colors.indigo[900],
),
)
],
),
),
),
color: Colors.transparent,
),
),
),
),
);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句