在 Flutter 中，当按下另一个按钮时，如何使另一个按钮出现在另一个按钮上方

Question

按下按钮。其上方还会出现一两个按钮，以提供更多选项。当您再次按下原来的按钮时，它会隐藏额外的按钮。

如何在 Flutter 中实现这一目标？

Answer 1

这就是您要找的吗？我们正在使用布尔值来显示额外的按钮

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'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}