Flutter底部溢出

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：中心...垂直方向：向下◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤ ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤══════════════════════════════════════════════════ ══════════════════════════════════════════════════这是我的代码：

  @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

您在此处有两个选择：1.在ListView()设置为shrinkWrap的情况下使用true

 @override
   Widget build(BuildContext context) {
    return Center(
      child: ListView(
              shrinkWrap: true,
    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}%'),
        ]
      ),
    ],
  ),
);
} }
Column()与singleChildScrollView()换行

@override
Widget build(BuildContext context) {
  return Center(
  child: SingleChildScrollView(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}%'),
    ]
  ),
],
),),
);
}}

就是这样