在颤动中设置行宽答案

【问题标题】：Set Row width in flutter在颤动中设置行宽
【发布时间】：2020-05-06 21:44:58
【问题描述】：

有没有办法在颤动中设置一行的宽度？我收到溢出错误：

错误 - “在布局期间抛出了以下断言：右侧的 RenderFlex 溢出了 10.0 像素。”

我正在抓取屏幕尺寸及其即将通过，但我仍然收到错误消息。违规行是 ROW 声明。

代码如下：

     @override
   Widget build(BuildContext context) {
    return Container(
       width: widget.screenSize.width,
       height: widget.screenSize.height,
       child: Stack(children: <Widget>[
       Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(30),
                  bottomRight: Radius.circular(30))),
          width: widget.screenSize.width,
          padding: EdgeInsets.fromLTRB(20, 0, 0, 20),
          child: Stack(
            children: <Widget>[
              Positioned(
                  right: 0,
                  top: 0,
                  child: Align(
                      heightFactor: .75,
                      widthFactor: .7,
                      alignment: Alignment.bottomLeft,
                      child: Hero(
                        tag: "pokeball",
                        child: Image.asset(
                          'assets/images/pokeball.png',
                          color: Colors.blue.withOpacity(.50),
                          height: 180,
                        ),
                      ))),
              Container(
                width: widget.screenSize.width - 10,
                padding: EdgeInsets.only(
                    top: MediaQuery.of(context).padding.top),
                margin: EdgeInsets.only(
                    top: MediaQuery.of(context).padding.top + 20),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Support Center",
                      style: TextStyle(
                          fontSize: _getFontSize(30), fontWeight: FontWeight.w600),
                    ),


                   SizedBox(
                      height: 15,
                    ),  

                    SizedBox(
                      height: 15,
                    ),
                    AnimatedContainer(
                      curve: Curves.linear,
                      duration: Duration(milliseconds: 300),
                      height: isViewAll ? 0 : 100,
          ERROR THROWN ->   **child: Row(**
                        children: <Widget>[
                          _getCategoryCard('Caregivers', Color(0xff4dc2a6),
                              Color(0xff65d4bc)),
                          _getCategoryCard(
                              'Hotline', Color(0xfff77769), Color(0xfff88a7d))
                        ],
                      ),
                    ),
                    AnimatedContainer(
                      curve: Curves.linear,
                      duration: Duration(milliseconds: 300),
                      height: isViewAll ? 0 : 100,
                      child: Row(
                        children: <Widget>[
                          _getCategoryCard('911', Color(0xff59a9f4),
                              Color(0xff6fc1f9)),

                        ],
                      ),
                    ),
                  ],
                ),

              ),
            ],
          )
          ),
     _News()
    ]
    )
    );
 }

【问题讨论】：

标签： flutter dart

【解决方案1】：

Row 在其子项占用的空间超过其自身时抛出此错误。这是故意的，因为 Flutter 将 Row 或 Column 上的溢出视为布局错误。让孩子变小或动态调整大小，您的错误就会消失。

如果您想强制子级动态调整大小，请将它们包围在Expanded：

Row(
  children: [
    Expanded(child: _getCategoryCard('Caregivers', Color(0xff4dc2a6), Color(0xff65d4bc))),
    Expanded(child: _getCategoryCard('Caregivers', Color(0xff4dc2a6), Color(0xff65d4bc))),
  ],
),

你也可以把Row改成Wrap，这样会导致孩子溢出水平尺寸会自动下移一行：

Wrap(
  orientation: Orientation.horizontal,
  children: [
    _getCategoryCard('Caregivers', Color(0xff4dc2a6), Color(0xff65d4bc)),
    _getCategoryCard('Caregivers', Color(0xff4dc2a6), Color(0xff65d4bc)),
  ],
),

【讨论】：