我如何在颤振中实现这一目标？答案

【问题标题】：How can i achieve this in flutter?我如何在颤振中实现这一目标？
【发布时间】：2019-02-23 05:42:02
【问题描述】：

我正在尝试在颤振中实现相同的布局，我该如何实现它，我已经尝试过使用 wrap 小部件，但是 Textfield 获得全宽并根据内容动态更改文本字段宽度是不可能的

【问题讨论】：

为什么不向右移动文本字段并自己管理选择？我只是在黑暗中拍摄。
你可以使用docs.flutter.io/flutter/material/Chip-class.html和docs.flutter.io/flutter/widgets/ListView-class.html
@GünterZöchbauer 如何动态更改文本字段宽度？
你为什么需要那个？那有什么问题呢？当文本值更改时，会调用onChanged，您可以在其中更新宽度。我自己还没有使用过 Chip 小部件，但我想它会自动满足您的需求。
@GünterZöchbauer 我不认为芯片小部件是可能的，因为我想在用户删除文本字段中的文本时删除芯片。

标签： dart flutter flutter-layout flutter-animation

【解决方案1】：

我不知道这是否为时已晚。但是这个库正是你所需要的。您在网站上有所有步骤。

这是一个名为 Flutter Chips 的库。有步骤，我也会放图书馆里的链接。

https://pub.dev/packages/flutter_chips_input

首先安装库：

dependencies:
  flutter_chips_input: ^1.9.4

这里是代码部分：

ChipsInput(
initialValue: [
    AppProfile('John Doe', 'jdoe@flutter.io', 'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg')
],
decoration: InputDecoration(
    labelText: "Select People",
),
maxChips: 3,
findSuggestions: (String query) {
    if (query.length != 0) {
        var lowercaseQuery = query.toLowerCase();
        return mockResults.where((profile) {
            return profile.name.toLowerCase().contains(query.toLowerCase()) || profile.email.toLowerCase().contains(query.toLowerCase());
        }).toList(growable: false)
            ..sort((a, b) => a.name
                .toLowerCase()
                .indexOf(lowercaseQuery)
                .compareTo(b.name.toLowerCase().indexOf(lowercaseQuery)));
    } else {
        return const <AppProfile>[];
    }
},
onChanged: (data) {
    print(data);
},
chipBuilder: (context, state, profile) {
    return InputChip(
        key: ObjectKey(profile),
        label: Text(profile.name),
        avatar: CircleAvatar(
            backgroundImage: NetworkImage(profile.imageUrl),
        ),
        onDeleted: () => state.deleteChip(profile),
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    );
},
suggestionBuilder: (context, state, profile) {
    return ListTile(
        key: ObjectKey(profile),
        leading: CircleAvatar(
            backgroundImage: NetworkImage(profile.imageUrl),
        ),
        title: Text(profile.name),
        subtitle: Text(profile.email),
        onTap: () => state.selectSuggestion(profile),
    );
},
)

【讨论】：