flutter - 如何在Flutter应用中解决此UI问题？

Question

大家好，这是我的第一个Flutter应用。我必须像下面的图像一样做一个屏幕:

这就是我得到的:

我的问题是我无法在圆形容器上显示添加按钮，并且如果我更改芯片中的文本，其他芯片上的文本也会更改。
像这样:

这是我的代码:

    Widget ExpertiseRow() {
    void _addNewExpertiseRow() {
      setState(() {
        count = count + 1;
      });
    }

    return new Container(
        width: 170.0,
        padding: new EdgeInsets.all(5.0),
        child: new Column(children: <Widget>[
          Chip(
            onDeleted: () {
              setState(() {
                count = count - 1;
                chips.removeAt(count + 1);
                print(chips.toList());
              });
            },
            deleteIcon: Icon(
              Icons.close,
              color: Colors.white,
              size: 20,
            ),
            backgroundColor: Colors.black,
            avatar: Container(
                width: 450,
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                child: IconButton(
                    //iconSize: 40,
                    icon: Icon(
                      Icons.add,
                      color: Colors.black,
                      size: 30,
                    ),
                    onPressed: _addNewExpertiseRow)),
            label: EditableText(
              controller: controller,
              onSubmitted: (text) {
                chips.add(text);
                print(chips.toList());
                setState(() {
                  chips = chips;
                });
              },
              focusNode: FocusNode(),
              backgroundCursorColor: Colors.white,
              cursorColor: Colors.white,
              style: TextStyle(color: Colors.white),
            ),
          ),
          new Container(
            //padding: new EdgeInsets.all(10.0),
            child: InkWell(
                onTap: _addNewContactRow,
                child: Image.asset(
                  'assets/images/add.png',
                  height: 50,
                  width: 50,
                  fit: BoxFit.cover,
                )), /*IconButton(
                  alignment: Alignment.topCenter,
                  icon: Icon(
                    Icons.add,
                    color: Colors.black,
                    size: 30,
                  ),
                  onPressed: _addNewContactRow))*/
          )
        ]));
  }

@override
  Widget build(BuildContext context) {
    var height =
        MediaQuery.of(context).size.height - MediaQuery.of(context).padding.top;
    var space = height > 650 ? kSpaceM : kSpaceS;
    List<Widget> _expertises =
        new List.generate(count, (int i) => ExpertiseRow());

    return new Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.white,
        appBar: new AppBar(
          title: new Center(
              child: new Text(
            "Compte Entrepreneur",
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.black,
            ),
          )),
          elevation: 0.0,
          backgroundColor: Colors.white,
        ),
        body: Form(
            key: _formKey,
            child: new LayoutBuilder(builder: (context, constraint) {
              return new Center(
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      height: 40,
                    ),
                    new Text(
                      "Nom et prénom",
                      style: TextStyle(
                        fontSize: 17.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                    FadeSlideTransition(
                        animation: _formElementAnimation,
                        additionalOffset: space,
                        child: CustomInputField(
                          label: 'Votre nom',
                          prefixIcon: Icons.person,
                          obscureText: false,
                          textController: _fullnameController,
                          validator: ValidatorService.fullNameValidate,
                          onChanged: (text) {
                            name = text;
                            print(name);
                          },
                        )),
                    new Container(
                      padding: new EdgeInsets.all(30.0),
                    ),
                    new Text(
                      "Position",
                      style: TextStyle(
                        fontSize: 17.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
                    FadeSlideTransition(
                        animation: _formElementAnimation,
                        additionalOffset: space,
                        child: CustomInputField(
                          label: 'Position',
                          prefixIcon: Icons.work,
                          obscureText: false,
                          textController: _positionController,
                          validator: ValidatorService.positionValidate,
                          onChanged: (text) {
                            position = text;
                            print(position);
                          },
                        )),
                    new Container(
                      padding: new EdgeInsets.all(30.0),
                    ),
                    new Text(
                      "Expertises",
                      style: TextStyle(
                        fontSize: 17.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.black,
                      ),
                    ),
//the chips input
                    FadeSlideTransition(
                        animation: _formElementAnimation,
                        additionalOffset: space,
                        child: new Container(
                          decoration: BoxDecoration(
                            borderRadius:
                                BorderRadius.all(Radius.elliptical(20, 20)),
                            border: Border.all(
                              width: 3,
                            ),
                          ),
                          height: 130.0,
                          width: 370.0,
                          child: new ListView(
                            children: _expertises,
                            scrollDirection: Axis.horizontal,
                          ),
                        )),
                    new Container(
                      padding: new EdgeInsets.all(55.0),
                    ),
                    new Container(
                        width: 350,
                        //color: Colors.blue,
                        //padding: new EdgeInsets.all(10.0),
                        child: Row(children: <Widget>[
                          Container(
                            width: 270,
                          ),
                          new Container(
                              width: 60,
                              color: Colors.black,
                              child: IconButton(
                                  icon: Icon(
                                    Icons.arrow_forward,
                                    color: Colors.white,
                                    size: 30,
                                  ),
                                  onPressed: () {
                                    if (_formKey.currentState.validate()) {
                                      Navigator.push(
                                        context,
                                        MaterialPageRoute(
                                          builder: (context) => InterestsPage(),
                                        ),
                                      );
                                    }
                                  }))
                        ])),
                  ],
                ),
              );
            })));
  }
}

我也想将筹码文本添加到列表中。
期待您的帮助。提前致谢

Answer 1

您可以尝试使用flutter_tags包。
如果您的最终目标是要达到的目标，那么它可以为您提供很多帮助。
将此添加到您的pubspec.yaml文件中

dependencies:
  flutter_tags: "^0.4.8+2"

它可以完成很多工作，就像您可以设置项目计数，对称性，间距，对齐方式，方向，总共还可以设置21个...
检查此代码!

import 'package:flutter_tags/flutter_tags.dart';
    .
    .
    .
List _items;
double _fontSize = 14;

@override
void initState(){
    super.initState();
    // if you store data on a local database (sqflite), then you could do something like this
    Model().getItems().then((items){
        items = items;
    });
}

@override
Widget build(BuildContext context) {
    return Tags(
      key:_tagStateKey,
      textField: TagsTextField(  
        textStyle: TextStyle(fontSize: _fontSize),
        constraintSuggestion: true, suggestions: [],
        onSubmitted: (String str) {
          // Add item to the data source.
          setState(() {
              // required
            _items.add(str);
          });
        },
      ),
      itemCount: _items.length, // required
      itemBuilder: (int index){          
            final item = _items[index];
    
            return ItemTags(
                  // Each ItemTags must contain a Key. Keys allow Flutter                      
                  // uniquely identify widgets.
                  key: Key(index.toString()),
                  index: index, // required
                  title: item.title,
                  active: item.active,
                  customData: item.customData,
                  textStyle: TextStyle( fontSize: _fontSize, ),
                  combine: ItemTagsCombine.withTextBefore,
                  image: ItemTagsImage(
                    image: AssetImage("img.jpg") // OR NetworkImage("https://...image.png")
                  ), // OR null,
                  icon: ItemTagsIcon(
                    icon: Icons.add,
                  ), // OR null,
                  removeButton: ItemTagsRemoveButton(
                     onRemoved: (){
                        // Remove the item from the data source.
                        setState(() {
                            // required
                            _items.removeAt(index);
                        });
                        //required
                        return true;
                    },
                  ), // OR null,
                  onPressed: (item) => print(item),
                  onLongPressed: (item) => print(item),
            );
    
      },
    );    
}

final GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();
// Allows you to get a list of all the ItemTags
_getAllItem(){
    List<Item> lst = _tagStateKey.currentState?.getAllItem;
    if(lst!=null)
        lst.where((a) => a.active==true).forEach( ( a) => print(a.title));        
}

您可以将ItemTags()包装在另一个小部件中

Tags(  
    itemCount: items.length, 
    itemBuilder: (int index){ 
        return Tooltip(
          message: item.title,
          child:ItemTags(
            title:item.title,
          )
        );
      },
    );    

希望能帮助您解决问题!