在颤动中设置行宽

Question

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

错误 - “在布局期间抛出了以下断言：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()
    ]
    )
    );
 }

Answer 1

当Row的子级占用的空间比它自己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)),
  ],
),