首页 > 解决方案 > 一个 RenderFlex 在底部溢出了 45 个像素。扑

问题描述

当我将屏幕切换到登录屏幕然后在 TextField 中键入时,我遇到了 RenderFlex 溢出问题。一旦我键入并垂直滚动,我就会返回板载屏幕,就会出现错误。似乎当我用“SingleChildScrollView”包裹“Column”时,问题就出现了。我已将代码添加到以下问题。

flutter: The following assertion was thrown during layout:
flutter: A RenderFlex overflowed by 45 pixels on the bottom.
flutter:
flutter: The relevant error-causing widget was:
flutter:   Column file:lib/screens/splash/components/splash_content.dart:17:12
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is: RenderFlex#a88be OVERFLOWING:
flutter:   needs compositing
flutter:   creator: Column ← SplashContent ← RepaintBoundary ← IndexedSemantics ←
flutter:     NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ←
flutter:     _SliverFillViewportRenderObjectWidget ← _SliverFractionalPadding ← SliverFillViewport ← Viewport ←
flutter:     ⋯
flutter:   parentData: <none> (can use size)
flutter:   constraints: BoxConstraints(w=428.0, h=319.8)
flutter:   size: Size(428.0, 319.8)
flutter:   direction: vertical
flutter:   mainAxisAlignment: start
flutter:   mainAxisSize: max
flutter:   crossAxisAlignment: center
flutter:   verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════

class SplashContent extends StatelessWidget {
  const SplashContent({
    Key key,
    this.text,
    this.lottie,
  }) : super(key: key);
  final String text, lottie;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
      Spacer(),
      Text(
        "AA",
        style: TextStyle(
          fontSize: getProportionateScreenWidth(36),
          color: kPrimaryColor,
          fontWeight: FontWeight.normal,
        ),
      ),
      Text(
        text,
        textAlign: TextAlign.center,
      ),
      Spacer(flex: 2),
      Lottie.asset(
        lottie,
        height: getProportionateScreenHeight(265),
        width: getProportionateScreenWidth(235),
      ),
    ]);
  }
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: double.infinity,
        child: Padding(
          padding:
              EdgeInsets.symmetric(horizontal: getProportionateScreenWidth(20)),
          child: SingleChildScrollView(
            child: Column(
              children: [
                SizedBox(height: SizeConfig.screenHeight * 0.04),
                Text(
                  "Welcome",
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: getProportionateScreenWidth(28),
                      fontWeight: FontWeight.normal),
                ),

标签: visual-studioflutterdart

解决方案


应该

SingleChildScrollView

小部件它可能会解决您的问题。


推荐阅读