Question

有人会遇到这种情况继续帮助我吗？我不确定下一步如何尝试解决面板扩展时的溢出问题。我尝试将其包装到灵活的小部件中，但这似乎无法解决问题。

这是我的例外： rendering渲染库捕获到异常════════════════ 在布局期间引发了以下断言： RenderFlex在底部溢出了68个像素。

相关的引起错误的小部件是：列file：///Users/selorm/AndroidStudioProjects/flutter_master/lib/src/widgets/weather_widget.dart：17：14 溢出的RenderFlex的方向为Axis.vertical。 RenderFlex溢出的边缘已在渲染中用黄色和黑色条纹图案标记。这通常是由于内容对于RenderFlex而言太大。

请考虑应用弹性系数（例如，使用扩展窗口小部件）来强制RenderFlex的子代适应可用空间，而不是将其尺寸设置为自然尺寸。这被认为是错误情况，因为它表明存在无法看到的内容。如果内容合法地大于可用空间，请考虑在将内容放入Flex中之前，使用ClipRect小部件对其进行裁剪，或者考虑使用可滚动容器而不是Flex，例如ListView。

有问题的特定RenderFlex是：RenderFlex＃8829e relayoutBoundary = up1 OVERFLOWING ...需要合成 ... parentData：offset = Offset（0.0，0.0）（可以使用size） ...约束：BoxConstraints（0.0 <= w <= 411.4，0.0 <= h <= 410.6） ...大小：大小（411.4，410.6） ...方向：垂直 ... mainAxisAlignment：中心 ... mainAxisSize：最大 ... crossAxisAlignment：中心 ... verticalDirection：向下 ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ══════════════════════════════════════════════════ ══════════════════════════════════════════════════ 这是我的代码：

  @override
   Widget build(BuildContext context) {
    return Center(
      child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Flexible(
        //flex: 2,
        //fit: FlexFit.loose,
      child: Text(
        this.weather.cityName.toUpperCase(),
        style: TextStyle(
            fontWeight: FontWeight.w900,
            letterSpacing: 5,
            color: AppStateContainer.of(context).theme.accentColor,
            fontSize: 25),
      ),
      ),
      SizedBox(
        height: 20,
      ),
      Flexible(
        //flex: 1,
      child:Text(
        this.weather.description.toUpperCase(),
        style: TextStyle(
            fontWeight: FontWeight.w100,
            letterSpacing: 5,
            fontSize: 20,
            color: AppStateContainer.of(context).theme.accentColor),
        ),
      ),
      WeatherSwipePager(weather: weather),
      Padding(
        child: Divider(
          color:
              AppStateContainer.of(context).theme.accentColor.withAlpha(50),
        ),
        padding: EdgeInsets.all(10),
      ),
      ForecastHorizontal(weathers: weather.forecast),
      Padding(
        child: Divider(
          color:
              AppStateContainer.of(context).theme.accentColor.withAlpha(50),
        ),
        padding: EdgeInsets.all(10),
      ),

      Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
        ValueTile("wind speed", '${this.weather.windSpeed} m/s'),
        Padding(
          padding: const EdgeInsets.only(left: 15, right: 15),
          child: Center(
              child: Container(
            width: 1,
            height: 30,
            color: AppStateContainer.of(context)
                .theme
                .accentColor
                .withAlpha(50),
          )),
        ),
        ValueTile(
            "sunrise",
            DateFormat('h:m a').format(DateTime.fromMillisecondsSinceEpoch(
                this.weather.sunrise * 1000))),
        Padding(
          padding: const EdgeInsets.only(left: 15, right: 15),
          child: Center(
              child: Container(
            width: 1,
            height: 30,
            color: AppStateContainer.of(context)
                .theme
                .accentColor
                .withAlpha(50),
          )),
        ),
        ValueTile(
            "sunset",
            DateFormat('h:m a').format(DateTime.fromMillisecondsSinceEpoch(
                this.weather.sunset * 1000))),
        Padding(
          padding: const EdgeInsets.only(left: 15, right: 15),
          child: Center(
              child: Container(
            width: 1,
            height: 30,
            color: AppStateContainer.of(context)
                .theme
                .accentColor
                .withAlpha(50),
          )),
        ),
        ValueTile("humidity", '${this.weather.humidity}%'),
        ]
      ),
    ],
  ),
);

} }

Answer 1

在顶部使用 SingleChildScrollView

body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: <Widget>[
              TopScreen(),
              BottomScreen(),
            ],
          ),
        ),

而且您也可以通过包裹 Column 或 Flexible 或 Expanded 中的任何其他 Widget 来完成。

Flexible(
    Column(
      children: [
        ...
      ],
    )
)

颤动的底部溢出

1 个答案: