如果填充宽度，如何使行进入新行

Question

我有一个包含一行的容器..这一行有一组项目..我希望当行中的项目达到容器宽度的末尾..在容器内开始一个新行..

这就是现在正在尝试的：

Container(
                  height: 100.0,
                      child: Row(
                        children: <Widget>[
                          new Container(
                            //height: 100.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(12.0)),
                              color: Color(0xFF2CB57D),
                            ),
                            padding: EdgeInsets.only(right: 5.0, left: 5.0),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new GestureDetector(
                                  onTap: () {
                                    setState(() {
                                    });
                                  },
                                  child: Icon(
                                    CustomFont.multiplication_2,
                                    size: 11.0,
                                    color: Colors.white,
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(right: 5.0),
                                  child: Text(
                                    "hhhhhh",
                                    style: TextStyle(
                                      /*fontSize: 8.0*/ fontSize:
                                    ScreenUtil().setSp(fontSize['9'][globals.platform]),
                                        color: Colors.white),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          new Container(
                            //height: 100.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(12.0)),
                              color: Color(0xFF2CB57D),
                            ),
                            padding: EdgeInsets.only(right: 5.0, left: 5.0),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new GestureDetector(
                                  onTap: () {
                                    setState(() {
                                    });
                                  },
                                  child: Icon(
                                    CustomFont.multiplication_2,
                                    size: 11.0,
                                    color: Colors.white,
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(right: 5.0),
                                  child: Text(
                                    "hhhhhh",
                                    style: TextStyle(
                                      /*fontSize: 8.0*/ fontSize:
                                    ScreenUtil().setSp(fontSize['9'][globals.platform]),
                                        color: Colors.white),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          new Container(
                            //height: 100.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(12.0)),
                              color: Color(0xFF2CB57D),
                            ),
                            padding: EdgeInsets.only(right: 5.0, left: 5.0),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new GestureDetector(
                                  onTap: () {
                                    setState(() {
                                    });
                                  },
                                  child: Icon(
                                    CustomFont.multiplication_2,
                                    size: 11.0,
                                    color: Colors.white,
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(right: 5.0),
                                  child: Text(
                                    "hhhhhh",
                                    style: TextStyle(
                                      /*fontSize: 8.0*/ fontSize:
                                    ScreenUtil().setSp(fontSize['9'][globals.platform]),
                                        color: Colors.white),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          new Container(
                            //height: 100.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(12.0)),
                              color: Color(0xFF2CB57D),
                            ),
                            padding: EdgeInsets.only(right: 5.0, left: 5.0),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new GestureDetector(
                                  onTap: () {
                                    setState(() {
                                    });
                                  },
                                  child: Icon(
                                    CustomFont.multiplication_2,
                                    size: 11.0,
                                    color: Colors.white,
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(right: 5.0),
                                  child: Text(
                                    "hhhhhh",
                                    style: TextStyle(
                                      /*fontSize: 8.0*/ fontSize:
                                    ScreenUtil().setSp(fontSize['9'][globals.platform]),
                                        color: Colors.white),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          new Container(
                            //height: 100.0,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.all(Radius.circular(12.0)),
                              color: Color(0xFF2CB57D),
                            ),
                            padding: EdgeInsets.only(right: 5.0, left: 5.0),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new GestureDetector(
                                  onTap: () {
                                    setState(() {
                                    });
                                  },
                                  child: Icon(
                                    CustomFont.multiplication_2,
                                    size: 11.0,
                                    color: Colors.white,
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(right: 5.0),
                                  child: Text(
                                    "hhhhhh",
                                    style: TextStyle(
                                      /*fontSize: 8.0*/ fontSize:
                                    ScreenUtil().setSp(fontSize['9'][globals.platform]),
                                        color: Colors.white),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        .......
                          ),
                        ],
                    )
                ),

这会返回这个：

我希望行中的最后一项而不是被裁剪以显示在下一行中，依此类推..

如何做到这一点？

Answer 1

你应该使用 Wrap Widget。

例如：

Wrap(
      runSpacing: 0,
      spacing: 5,
      children: tagsList
                    .map((tags) => Chip(
                           onDeleted: () {
                            setState(() {
                              tagsList.remove(tags);
                            });
                          },
                          deleteIcon: Icon(
                            Icons.cancel,
                            color: Colors.white,
                          ),
                          label: Container(
                              constraints: new BoxConstraints(
                                  maxWidth:
                                      MediaQuery.of(context).size.width - 70.0),
                              child: Text(
                                tags,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(color: Colors.white),
                              )),
                          backgroundColor: ColorsHelper.skyDark(),
                        ))
                    .toList(),
              )

而 tagsList 是字符串列表

List<String> tagsList;