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

使用扩展或灵活小部件包装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

Answer 2

只需用-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 3

您可以使用SizedBox而不是列。

SizedBox(
   child: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 4

简单使用

isExpanded：真，

在下拉按钮上。

示例

        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 5

您可以使用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 6

看起来像您在使用静态填充和大小调整。在除此设备之外的其他设备上渲染项目时，这可能是一个问题。我强烈建议您使用以下之一：

SingleChildScrollView在LayoutBuilder下。
- 尝试使用包含自定义高度和宽度的容器代替列
如果您决定设置自定义填充，或者可以使用MediaQueryData。

我建议初学者使用第一个，这样会更容易。第二种方法是计算屏幕的宽度和高度并进行调整。

Answer 7

 Flexible(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Row(children: [
                      Image.asset(
                        "${TextConstant.IMAGE_PATH}/ic_birthday.png",
                        height: 32.0,
                      ),
                      ShowTextField(
                          text: "Feb 20, 2020",
                          textSize: 14.0,
                          fontWeight: FontWeight.normal,
                          colorCode: HexColor("#878787")),
                      SizedBox(width: 20.0),
                      Container(
                        padding:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 4.0),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(25.0),
                          gradient: LinearGradient(
                            colors: [HexColor("#2A5EF2"), HexColor("#2F39B1")],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                          ),
                        ),
                        child: ShowTextField(
                            text: "View Feedback",
                            textSize: 12.0,
                            fontWeight: FontWeight.normal,
                            colorCode: HexColor("#FFFFFF")),
                      ),
                    ]),

                    ShowTextField(
                        text: "Olive Queen",
                        textSize: 16.0,
                        fontWeight: FontWeight.w900,
                        colorCode: HexColor("#000000")),
                    ShowTextField(
                        text: "Christ Church Boy's Senior Secondary School.",
                        textSize: 14.0,
                        fontWeight: FontWeight.w700,
                        colorCode: HexColor("#104FEF")),
                    RichTwoText(
                        firstText: "Topics : ",
                        secondText: "Math, English, Science",
                        firstFontSize: 14.0,
                        secondFontSize: 14.0,
                        firstFontWeight: FontWeight.normal,
                        secondFontWeight: FontWeight.bold,
                        firstTextColor: HexColor("#6B6B6B"),
                        secondTextColor: HexColor("#FF4646"),
                        alignment: TextAlign.center),
                  ],
                ),
              ),

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

7 个答案: