如何将按钮更改为文本字段 flutter

Question

如果我有一个按钮，例如图片中的 + 按钮，当用户单击该按钮时，flutter 是否可以将其更改为文本字段。 例如，当用户点击它消失的按钮时，会出现一个文本框，他们可以输入一个数字吗？

我正在尝试将其实现到我的应用程序中，但不知道该怎么做。

Answer 1

有多种方法可以做到这一点。 但是如果单击按钮，一种方法可以是跟踪。 并添加一个 animatedSwitcher 在按钮和文本字段之间切换

代码看起来像这样

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  bool _isTextFieldShown = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      duration: Duration(
        milliseconds: 300,
      ),
      child: _isTextFieldShown
          ? TextField()
          : IconButton(
              onPressed: () {
                setState(() {
                  _isTextFieldShown = true;
                });
              },
         icon: Icon(Icons.add)),
    );
  }
}

希望能帮助到你