Flutter

Question

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

这是我的容器的相关代码，其中包含 selected 项目：

  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,
        ),
      ),
    ),
  );
}

Answer 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);
}

Answer 2

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

参考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,
            ),
          ),

您的结果屏幕->

Flutter - 在容器中包含小部件

Flutter - contain widgets within a container

widget

overflow

dart

display