在颤振列表视图中右溢出 23 像素

Posted 2023-02-23

【中文标题】在颤振列表视图中右溢出 23 像素

【英文标题】：Right overflowed by 23 pixels in flutter listview

【发布时间】：2020-03-03 23:44:30

【问题描述】：

我创建了一个列表视图，但它显示 OVERFLOWED BYELS ERROR

这是给你的列表视图

return ListView.builder(

      itemCount: titles.length,
      itemBuilder: (context, index) 
        return Card(
            elevation: 50,
            child: InkWell(


              splashColor: Colors.green,
              highlightColor: Colors.red,
              child: Row(
                children: <Widget>[


              Container(


                height: 100.0,
                  width:50.0,

                decoration: BoxDecoration(
                    gradient:LinearGradientStyle.linearGradient(
                        orientation:LinearGradientStyle.ORIENTATION_HORIZONTAL,
                        gradientType: LinearGradientStyle.GRADIENT_TYPE_AMIN
                    )
                ),),

                  Container(
                      margin: EdgeInsets.all(10),
                      child: Text(
                        numbers[index],
                      )),


                  Container(
                    margin: EdgeInsets.all(10),
                    child: GradientText((titles[index]),
                      gradient:gradient,

                      style:TextStyle(fontSize:20.0,fontWeight:FontWeight.bold, ),
                    ),
                    //Text(titles[index]),
                  )
                ],
              ),
              onTap: () => onTaps[index](),
            ));
      );

如果您需要更多代码，请发表评论 ...

而不是溢出错误它应该出现在列表的第二行。如果您有任何解决方案，请帮助我....

【问题讨论】：

你可以试试wrap widget

在这种情况下，我强烈建议您使用 ListTile：youtube.com/watch?v=l8dj0yPBvgQ 它将使您的代码看起来更干净并避免此问题。

@tinus jackson 你知道在这种情况下使用 wrap 小部件的任何方法吗？我尝试使用但屏幕上出现错误

【参考方案1】：

ListView.builder(

      itemCount: 1,
      itemBuilder: (context, index) 
        return Card(
            elevation: 50,
            child: InkWell(


              splashColor: Colors.green,
              highlightColor: Colors.red,
              child: Row(
                children: <Widget>[


              Container(


                height: 100.0,
                  width:50.0,

                ),

                  Container(
                      margin: EdgeInsets.all(10),
                      child: Text(
                        "numbers[index]",
                      )),


                  Flexible(
                                      child: Container(
                      margin: EdgeInsets.all(10),
                      child: Text("GradientText"*30,

                        style:TextStyle(fontSize:20.0,fontWeight:FontWeight.bold, ),
                      ),
                      //Text(titles[index]),
                    ),
                  )
                ],
              ),
              onTap: () ,
            ));
      ),

使用灵活的小部件，比如有溢出的父部件

【讨论】：

谢谢它帮助了我。我怎样才能用 WRAP 小部件包装它而不是使用灵活的父级

Wrap 小部件具有子属性而不是子属性。这就是为什么灵活更适合您的情况。

我使用儿童包装但出现错误。然后我使用您的解决方案解决了这个问题

您可以在 Row 和 Column 小部件中使用扩展的灵活小部件。检查这个：***.com/questions/52645944/… 它可以教给你一些东西来学习如何在 Flutter 中进行设计

【参考方案2】：

DropdownButton 也有类似的问题。我试图为问题和答案创建一个下拉列表，因为我必须为自定义模型创建 DropdownButton。

isExpanded: true,

救了我的命

List<Question> questions;

   Widget buildDropDown() 
    return DropdownButton<Question>(
      isExpanded: true,
      value: _selectedQuestion,
      style: TextStyle(color: Colors.white),
      items: questions.map<DropdownMenuItem<Question>>((Question question) 
        return DropdownMenuItem(
          child: Text(
            question.title,
          ),
          value: question,
        );
      ).toList(),
      onChanged: (Question question) 
        setState(() 
          _selectedQuestion = question;
        );
      ,
    );
  

class Question 
  String title;
  String answer;
  int id;

  Question(this.id, this.title);

  void setAnswer(String answer) 
    this.answer = answer;