如何实现截图中类似的动态TextField或文本网格？

核心是通过状态管理触发UI更新，Flutter里用setState配合StatefulWidget就能搞定，以下是完整示例：

• 先定义一个StatefulWidget类，内部维护存储列表项的数组
• 在TextButton的onPressed回调中，通过setState向数组添加新Widget，触发ListView重绘

class DynamicListView extends StatefulWidget {
  const DynamicListView({super.key});

  @override
  State<DynamicListView> createState() => _DynamicListViewState();
}

class _DynamicListViewState extends State<DynamicListView> {
  // 存储所有列表项的数组
  final List<Widget> _listItems = [];

  // 点击按钮添加新项的方法
  void _addNewItem() {
    setState(() {
      _listItems.add(
        SizedBox(
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          child: Text(
            'XVI',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(
          onPressed: _addNewItem,
          child: Text('添加新项'),
        ),
        Expanded(
          child: ListView(
            children: _listItems,
          ),
        ),
      ],
    );
  }
}

关键说明 #

• 必须用StatefulWidget：只有状态类能调用setState，通知Flutter框架重新构建UI
• 不能直接修改_listItems后不调用setState：Flutter无法自动感知数组变化，必须通过setState标记状态更新
• 如果是跨组件共享状态的复杂场景，可改用Provider、Riverpod或Bloc，简单需求用setState完全足够

内容的提问来源于stack exchange，提问作者vijay pawar