按下按钮。其上方还会出现一两个按钮,以提供更多选项。当您再次按下原来的按钮时,它会隐藏额外的按钮。
如何在 Flutter 中实现这一目标?
这就是您要找的吗?我们正在使用布尔值来显示额外的按钮
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool showExtraButtons = false; //bool to hide or show extra buttons
TextEditingController textController = TextEditingController();
@override
void dispose() {
textController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Magic buttons'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
showExtraButtons = !showExtraButtons;
});
},
child: const Text('More Buttons!!'), //sets the state of the bool to show or hide the buttons
),
Visibility(
visible: showExtraButtons,
child: Column(
children: [ //add whatever widgets you want here
TextField(
controller: textController,
decoration: const InputDecoration(
labelText: 'Enter Text',
),
),
ElevatedButton(
onPressed: () {
// Handle action for the second extra button
},
child: const Text('Extra Button'),
),
],
),
),
],
),
),
);
}
}