visual-studio - 一个 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),
),
解决方案
你应该用
SingleChildScrollView
小部件它可能会解决您的问题。
推荐阅读
- javascript - v-for 循环中的 SVG 导致页面加载速度变慢
- python - MySQL & Python:如何映射表数据?
- javascript - 用 JS/HTML 做一个列表
- java - 存储过程中的最终字符串
- branch.io - 从分支导出数据
- intellij-idea - Intellij:提交前:运行 git hooks
- laravel - Laravel 雄辩的如何显示来自 2 个表的数据
- python-3.x - 在 Python3 中以特定值拆分日期列表
- javascript - 更改我的回调,承诺异步等待
- javascript - JavaScript AddEventListener - 退格