Flutter中如何在Chip组件列表内添加一个不同的按钮？

假设你使用的是Material-UI的Chip组件，以下是直接可用的实现思路和代码：

1. 核心逻辑

• 用状态存储Chip列表数据和新增标签的输入值
• 点击按钮时将输入内容加入列表，同时清空输入框

2. 完整代码示例

import { useState } from 'react';
import { Chip, TextField, Button, Box } from '@mui/material';

function ChipListWithAddBtn() {
  // 初始化已有标签
  const [chips, setChips] = useState(['标签1', '标签2', '标签3']);
  const [newChipText, setNewChipText] = useState('');

  // 添加新标签
  const addNewChip = () => {
    if (newChipText.trim()) {
      setChips([...chips, newChipText.trim()]);
      setNewChipText('');
    }
  };

  // 删除标签（可选功能）
  const removeChip = (targetChip) => {
    setChips(chips.filter(chip => chip !== targetChip));
  };

  return (
    <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center', padding: 2 }}>
      {/* 渲染现有标签列表 */}
      {chips.map(chip => (
        <Chip
          key={chip}
          label={chip}
          onDelete={() => removeChip(chip)}
          variant="outlined"
        />
      ))}

      {/* 新增标签的输入框和按钮 */}
      <TextField
        size="small"
        value={newChipText}
        onChange={(e) => setNewChipText(e.target.value)}
        placeholder="输入新标签"
        onKeyPress={(e) => e.key === 'Enter' && addNewChip()}
      />
      <Button variant="contained" onClick={addNewChip}>
        添加
      </Button>
    </Box>
  );
}

export default ChipListWithAddBtn;

3. 适配其他UI框架说明
   如果用的是Ant Design、Element UI等其他库，核心逻辑完全一致：

• 用状态维护标签数组
• 点击按钮时向数组push新元素
• 重新渲染标签列表即可

内容的提问来源于stack exchange，提问作者황희윤