flutter 底溢出

Question

任何人都可以帮助我解决这个我不断遇到的异常吗？我不确定接下来要尝试什么来修复面板扩展时的溢出。我试过把它包装成一个灵活的小部件，但这似乎并没有解决这个问题。
这是我的异常(exception):

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 68 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///Users/selorm/AndroidStudioProjects/flutter_master/lib/src/widgets/weather_widget.dart:17:14
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#8829e relayoutBoundary=up1 OVERFLOWING
...  needs compositing
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=410.6)
...  size: Size(411.4, 410.6)
...  direction: vertical
...  mainAxisAlignment: center
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

这是我的代码:

  @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

您必须有两个快速选择:

使用 ListView()与 shrinkWrap设置为 true

     @override
     Widget build(BuildContext context) {
       return ListView(
         shrinkWrap: true,
         children: <Widget>[
           // Children
         ],
       );
     }

包装Column()与 singleChildScrollView()

     @override
     Widget build(BuildContext context) {
       return SingleChildScrollView(
         child: Column(
           mainAxisSize: MainAxisSize.max,
           children: <Widget>[
             // Children
           ],
         ),
       );
     }

就是这样