如何在flutter中使用列小部件内的Wrap小部件

Question

我想使用

wrap

小部件连续显示项目，我的代码堆栈如下所示

column>padding>wrap

它的输出是这样的

我想要他们，我像这个教程中那样划船

这是代码：

customExpansionTile(context, "Token Distribution Time", true,
          Icon(Icons.info_rounded, color: HexColor("#5344ed")), <Widget>[
        SizedBox10(),
        Container(
            // padding: EdgeInsets.only(right: 70),
            child: Row(
          children: [
            Expanded(
                child: SizedBox(
                    child: ListTile(
                      //font change
                      title: ListView.builder(
                          itemCount: checkBoxListTileModel.length,
                          itemBuilder: (BuildContext context, int index) {
                          return new Card(
                            child: new Container(
                              padding: new EdgeInsets.all(10.0),
                              child: Column(
                                children: <Widget>[
                                  new CheckboxListTile(
                                      controlAffinity:
                                          ListTileControlAffinity.leading,
                                      activeColor: HexColor("#5344ed"),
                                      dense: true,
                                      //font change
                                      title: new Text(
                                        checkBoxListTileModel[index].title,
                                        
                                      value: checkBoxListTileModel[index]
                                          .isCheck,
                                      secondary: Padding(
                                        padding: EdgeInsets.only(left: 1),
                                        child: Container(
                                            child:
                                                checkBoxListTileModel[index].isCheck ==true?
                                                Container(
                                                        child: TextButton(
                                                          onPressed: () {
                                                            _getSelectedRowInfo(
                                                              checkBoxListTileModel[index].title);
                                                          },
                                                          child: Center(
                                                              child: Text(
                                                                  "Pick time",),
                                                        ),
                                                      )
                                                    : null),
                                      ),
                                      onChanged: (bool? val) {
                                        itemChange1(val!, index);
                                      }),
                                      Padding(
                                        padding: const EdgeInsets.fromLTRB(0, 8, 160, 0),

                                        //here i am using wrap widget
                                        child: Wrap(
                                          
                                          children:[
                                           Container(
                                          child:checkBoxListTileModel[index]
                                              .isCheck? Tags(
                                            itemCount: _timingTagsList.length, // required
                                            itemBuilder: (int index){          
                                                  final item = _timingTagsList[index];
                                            
                                            return  ItemTags(
                                                  key: Key(index.toString()),
                                                  color:HexColor("#5344ed"),
                                                  index: index, // required
                                                  title: _timingTagsList[0],
                                                  textStyle: TextStyle( fontSize: 14, ),
                                                  combine: ItemTagsCombine.withTextBefore,
                                                 
                                                  removeButton: ItemTagsRemoveButton(
                                                    onRemoved: (){  
                                                        setState(() {
                                                            _timingTagsList.removeAt(index);
                                                        });
                                                        return true;
                                                    },
                                                  ),
                                                  onPressed: (item) => print(item),
                                                  onLongPressed: (item) => print(item),
                                            );
                                          },):Padding(
                                            padding: const EdgeInsets.only(left: 70),
                                            child:
                                                Row(crossAxisAlignment: CrossAxisAlignment.center, children: []))
                                                                    ),
                                          ]),
                                      )]),
                            ),
                          );
                        }),
                   
                  ))),
          SizedBox(
            width: 10,
          ),
        ],
      ))

Answer 1

水平方向的用户方向

     Wrap(
        direction:Axis.horizontal,
          children:[
         //.....
        ]
       )

Answer 2

尝试下面的代码希望对您有所帮助参考Wrap小部件这里

Wrap(
     // direction: Axis.vertical,
      children: <Widget>[
        Container(
          color: Colors.blue,
          width: 100,
          height: 100,
          child: Center(
            child: Text(
              "W1",
              textScaleFactor: 2.5,
            ),
          ),
        ),
        Container(
          color: Colors.red,
          width: 100,
          height: 100,
          child: Center(
            child: Text(
              "W2",
              textScaleFactor: 2.5,
            ),
          ),
        ),
        Container(
          color: Colors.teal,
          width: 100,
          height: 100,
          child: Center(
            child: Text(
              "W3",
              textScaleFactor: 2.5,
            ),
          ),
        ),
        Container(
          color: Colors.indigo,
          width: 100,
          height: 100,
          child: Center(
            child: Text(
              "W4",
              textScaleFactor: 2.5,
            ),
          ),
        ),
        Container(
          color: Colors.orange,
          width: 100,
          height: 100,
          child: Center(
            child: Text(
              "W5",
              textScaleFactor: 2.5,
            ),
          ),
        ),
      ],
    )

您的结果屏幕水平轴方向 ->

您的屏幕垂直轴方向->

Answer 3

换行小部件默认是水平的，您需要检查换行中的项目是否具有有限的宽度，如果不是每个项目都将是单行。验证 ItemTags 是否能做到这一点。