Flutter - 在容器中包含小部件答案

【问题标题】：Flutter - contain widgets within a containerFlutter - 在容器中包含小部件
【发布时间】：2022-01-14 10:58:57
【问题描述】：

我正在创建一个小部件，使用户能够从多选列表中选择项目，然后显示这些项目。但是，容器中的小部件出现溢出问题。我希望项目自动显示在下一行，而不是溢出。

这是我保存所选项目的容器的相关代码：

  Padding(
      padding: EdgeInsetsDirectional.fromSTEB(16, 0, 16, 8),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: Container(
                width: MediaQuery.of(context).size.width * 0.9,
                height: 50,
              child: showSelectedItemsWidget(selectedList)
            ),
          )
        ],
      ),
    ),

这里是 showSelectedItemsWidget 的代码：

Widget showSelectedItemsWidgets(List<String> strings) {
  List<Widget> list = new List<Widget>();
  for(var i = 0; i < strings.length; i++){
    list.add( itemCapsule(strings[i]) );
  }
  return new Row(children: list);
}

这是 itemCapsule 小部件的代码：

Widget itemCapsule(String label) {
  return Container(
    decoration: BoxDecoration(
      color: FlutterFlowTheme.secondary600,
      borderRadius: BorderRadius.circular(20),
      shape: BoxShape.rectangle,
    ),
    child: Padding(
      padding: EdgeInsetsDirectional.fromSTEB(10, 8, 10, 8),
      child: Text(label,
        textAlign: TextAlign.center,
        style: FlutterFlowTheme.bodyText1.override(
          fontFamily: 'Roboto',
          color: Colors.white,
          fontWeight: FontWeight.w500,
        ),
      ),
    ),
  );
}

【问题讨论】：

标签： flutter dart widget overflow display

【解决方案1】：

将行替换为Wrap

Widget showSelectedItemsWidgets(List<String> strings) {
  List<Widget> list = new List<Widget>();
  for(var i = 0; i < strings.length; i++){
    list.add( itemCapsule(strings[i]) );
  }
  return new Wrap(children: list);
}

【讨论】：

谢谢你，这很好 - 非常感谢你的回复

【解决方案2】：

试试下面的代码希望它对你有帮助。在SingleChildScrollView 和scrollDirection: Axis.horizontal, 中添加您的Row 小部件，水平滚动您的列表。

参考SingleChildScrollViewhere

 SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.blue,
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.yellow,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  margin: EdgeInsets.all(10),
                  height: 50,
                  width: 100,
                  color: Colors.black,
                ),
              ],
            ),
          ),

在您的代码中

   return SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: list,
            ),
          ),

您的结果屏幕->

【讨论】：

谢谢，这是一个不错的选择 - 非常感谢您的回复
很高兴帮助你享受你的旅程与颤振支持我的回答谢谢你