每次在 flutter 中单击按钮时如何创建另一个新文本

Question

我想写一个如下的ui：

主要特点是当点击按钮时，一个新的随机 position 文本将在红框内创建，我面临的问题是当我点击按钮时，将创建一个随机 position 文本小部件，但旧文本消失了，任何人可以帮我？ 以下是我的代码：

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

  @override
  State<StatefulWidget> createState() => _AddNewWidgetState();
}

class _AddNewWidgetState extends State<AddNewWidget> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: const Text("Add Text"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Add Text Below:'),
            Stack(
              children: [
                Container(
                  width: double.infinity,
                  height: 600,
                  decoration: BoxDecoration(
                    border: Border.all(width: 2.0, color: Colors.red),
                  ),
                ),
                _addText(),
              ],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _press,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  _press() {
    //print("_press");
    setState(() {});
  }

  _addText() {
    return Positioned(
      child: Text(
        "hello ${Random().nextInt(10)}",
        key: ValueKey(Random().nextInt(100)),
      ),
      left: (Random().nextInt(300)).toDouble(),
      top: (Random().nextInt(600)).toDouble(),
    );`enter code here`
  }
}

Answer 1

创建列表以保存生成的项目，然后在堆栈上显示列表，如

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

  @override
  State<StatefulWidget> createState() => _AddNewWidgetState();
}

class _AddNewWidgetState extends State<AddNewWidget> {
  List<Widget> items = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Add Text"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('Add Text Below:'),
            Expanded(
              child: Stack(
                children: [
                  Container(
                    height: 600,
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 2.0,
                        color: Colors.red,
                      ),
                    ),
                  ),
                  ...items.map((e) => e).toList()
                ],
              ),
            ),
            FloatingActionButton(
              onPressed: _press,
              tooltip: 'Increment',
              child: const Icon(Icons.add),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _press,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  _press() {
    items.add(_addText());
    setState(() {});
  }

  Widget _addText() {
    return Positioned(
      child: Text(
        "hello ${Random().nextInt(10)}",
        key: ValueKey(Random().nextInt(100)),
      ),
      left: (Random().nextInt(300)).toDouble(),
      top: (Random().nextInt(600)).toDouble(),
    );
  }
}

包括两个晶圆厂，如果您需要 position 任何晶圆厂，请将其放在堆栈中Positioned(bottom:-20,righ:20) ，使用此值