每次在 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) ，使用此值