如何解决“ RenderFlex在右侧溢出了143个像素。” 文字错误？

Question

这是我的Cardview代码：

Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
        TitleText(text: "Item name mmmmmmmmm $index"),
        SizedBox(height: 20.0),
        Body1Text(text: "Discount mmmmmmmm",color: Colors.red,),
        SizedBox(height: 5.0),
        SubHeadText(text: "Price ,mmmmmmmmmmmmmmmmmm",color: Colors.red,)

    ],
),

Answer 1

只需使用

isExpanded: true,

在DropdownButton。

例子

        DropdownButton(
          isExpanded: true,
          items: data.map((item) {
            return new DropdownMenuItem(
              child: Text(item['name']),
              value: item['id'].toString(),
            );
          }).toList(),
          onChanged: (newVal) {
            setState(() {
              _mySelection = newVal;
            });
          },
          value: _mySelection,
        ),

Answer 2

您可以使用 Wrap 而不是 Column。

例如..

new Wrap(
   spacing: 5.0, 
   runSpacing: 5.0, 
   direction: Axis.vertical, // main axis (rows or columns)
   children: <Widget>[
       TitleText(text: "Item name mmmmmmmmm $index"),
       Body1Text(text: "Discount mmmmmmmm",color: Colors.red,),
       SubHeadText(text: "Price ,mmmmmmmmmmmmmmmmmm",color: Colors.red,)
   ],
 )

Answer 3

只需Card用Flexible小部件包裹您即可。

Row(
    children: <Widget>[
      Flexible(
        child: Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("Item name mmmasdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaammmmmm"),
              SizedBox(height: 15.0,),
              Text(
                "Discount mmmmmmmm",
              ),
              SizedBox(height: 5.0,),
              Text(
                "Price ,mmmmmmmmmdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfdgfmmmmmmmmm",
              )
            ],
          ),
        ),
      ),
    ],
  ),

Answer 4

使用 Expanded 或 Flexible 小部件包装 Row 的子项。您可以使用它们中的任何一个，两者都有其优点

Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Flexible(
        child: Text("Example of using flexible"),
      ),

      Expanded(
        child: Text("Example of using Expanded"),
      ),
    ]
);

更多信息：https : //github.com/flutter/flutter/issues/18448