被 18 像素抖动溢出答案

【问题标题】：overflowed by 18 pixel flutter被 18 像素抖动溢出
【发布时间】：2021-04-19 11:28:53
【问题描述】：

一个 RenderFlex 溢出了 18 个像素

你好，我是新来的颤振。我正在做一些颤动的项目，但这个小部件有一些问题，当我添加一个 FlatButton 时，我得到了 18 个像素的右溢出。你能帮帮我吗？

我的代码：

Widget _drawFooter() {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              // mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FlatButton(
                  onPressed: () {},
                  child: Text(
                    '10 COMMENTS',
                    style: _hashTagStyle,
                  ),
                ),
                Row(
                  children: [
                    IconButton(
                      icon: Icon(Icons.favorite),
                      onPressed: () {},
                      color: Colors.grey.shade400,
                    ),
                    Text('Open'),
                  ],
                ),
              ],
            ),
            Expanded(
              child: Row(
                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  FlatButton(
                    onPressed: () {},
                    child: Text(
                      'SHARE',
                      style: _hashTagStyle,
                    ),
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: Text(
                      'OPEN',
                      style: _hashTagStyle,
                    ),
                  ),
                  /* FlatButton(
                    onPressed: () {},
                    child: Text(
                      'Open',
                      style: _hashTagStyle,
                    ),
                  ),*/
                  //  Text('Open'),
                ],
              ),
            ),
          ],
        );
      }
    }

这是屏幕截图错误：

【问题讨论】：

用wrap替换row

标签： flutter dart

【解决方案1】：

您可以使用 wrap 代替 row。这是代码：

        wrap(
      children: [
        FlatButton(
            onPressed: () {},
            child: Text(
                '10 COMMENTS',
                style: _hashTagStyle,
              ),
            ),
            Row(
              children: [
                IconButton(
                  icon: Icon(Icons.favorite),
                  onPressed: () {},
                  color: Colors.grey.shade400,
                ),
                Text('Open'),
              ],
            ),
            FlatButton(
                onPressed: () {},
                child: Text(
                  'SHARE',
                  style: _hashTagStyle,
                ),
              ),
            FlatButton(
                onPressed: () {},
                child: Text(
                    'OPEN',
                    style: _hashTagStyle,
                ),
            ),
          ],
        ),
        
      ],
    )

这对我有用。更多详情请访问site。

【讨论】：

【解决方案2】：

将Row 替换为Wrap

Expanded(
        child: Wrap(
          direction: Axis.horizontal,
          alignment: WrapAlignment.spaceEvenly,
          // mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            FlatButton(
              onPressed: () {},
              child: Text(
                'SHARE',
              ),
            ),
            FlatButton(
              onPressed: () {},
              child: Text(
                'OPEN',
              ),
            ),
            //  Text('Open'),
          ],
        ),
      ),

【讨论】：

【解决方案3】：

尝试 SingleChildScrollView 和 SizedBox 空间：

    Widget _drawFooter() {
            return SingleChildScrollView(child:
    Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  // mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    FlatButton(
                      onPressed: () {},
                      child: Text(
                        '10 COMMENTS',
                        style: _hashTagStyle,
                      ),
                    ),
SizedBox(width: 20),
                        IconButton(
                          icon: Icon(Icons.favorite),
                          onPressed: () {},
                          color: Colors.grey.shade400,
                        ),
SizedBox(width: 10),
                        Text('Open'),
SizedBox(width: 20),
                      FlatButton(
                        onPressed: () {},
                        child: Text(
                          'SHARE',
                          style: _hashTagStyle,
                        ),
                      ),
SizedBox(width: 30),
                      FlatButton(
                        onPressed: () {},
                        child: Text(
                          'OPEN',
                          style: _hashTagStyle,
                        ),
                      ),
                      /* FlatButton(
                        onPressed: () {},
                        child: Text(
                          'Open',
                          style: _hashTagStyle,
                        ),
                      ),*/
                      //  Text('Open'),
                    ],
                ),
              ],
            ),
            );
          }

【讨论】：

【解决方案4】：

只需用 SingleChildScrollView 小部件包装 Row。

【讨论】：