我正在使用 Flutter 开发一个 ToDo 应用程序，并遇到了一个我正在努力解决的
RenderFlex overflowedRenderFlex溢出的 RenderFlex 的方向为 Axis.vertical。 溢出的 RenderFlex 边缘已在渲染中用黄色和 黑色条纹图案。这通常是由于内容对于 RenderFlex 来说太大造成的。 考虑应用弹性因子（例如使用扩展小部件）来强制 RenderFlex 适合可用空间，而不是调整其自然大小。 这被视为错误情况，因为它表明存在无法读取的内容 看到了。如果内容确实大于可用空间，请考虑使用 ClipRect 小部件，然后将其放入 Flex 中，或者使用可滚动容器而不是 Flex， 就像列表视图一样。 有问题的具体 RenderFlex 是：RenderFlex#33d4b relayoutBoundary=up2 OVERFLOWING: 需要合成 创建者：Column ← MediaQuery ← Padding ← SafeArea ← Stack ← LayoutBuilder ← SizedBox ← Center ← KeyedSubtree-[GlobalKey#bf933] ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← ⋯ ParentData: offset=Offset(0.0, 0.0) （可以使用大小） 约束：BoxConstraints(0.0<=w<=500.0, 0.0<=h<=237.0) size: Size(500.0, 237.0) direction: vertical
我已将问题隔离到我的
ToDoPageColumn
class ToDoPage extends StatefulWidget {
const ToDoPage({Key? key}) : super(key: key);
@override
State<ToDoPage> createState() => _ToDoPageState();
}
class _ToDoPageState extends State<ToDoPage> {
bool isActive = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffFAFAFA),
body: Center(
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.asset(
"assets/mountain.jpg",
fit: BoxFit.cover,
),
),
SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(23, 8, 23, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'My success list',
style: GoogleFonts.nunito(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.w500,
),
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(23, 8, 23, 8),
child: Tooltip(
message: 'List options menu',
child: Semantics(
label: 'My success list options menu',
enabled: true,
readOnly: true,
child: IconButton(
icon: const Icon(
Icons.more_vert_outlined,
color: Colors.white,
size: 25,
semanticLabel:
'Pomodoro timer list options menu',
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
Text('list options menu')),
);
},
),
),
),
),
],
),
Padding(
padding: EdgeInsets.fromLTRB(23, 8, 23, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'Thusrday, December 29, 2022',
style: GoogleFonts.nunito(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w500,
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(23, 8, 23, 8),
child: Align(
alignment: Alignment.center,
child: Glassmorphism(
blur: 5,
opacity: 0.2,
radius: 15,
child: Container(
height: 100,
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment:
MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
'task 1',
style: GoogleFonts.nunito(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
SmileFaceCheckbox(
isActive: isActive,
onPress: () {
setState(() {
isActive = !isActive;
});
}),
],
),
Align(
alignment: Alignment.topLeft,
child: Text(
'Explain note',
textAlign: TextAlign.center,
style: GoogleFonts.nunito(
color: Colors.white.withOpacity(0.8),
fontSize: 16.0,
),
),
),
],
),
),
),
),
),
//hiint
Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 15.0),
child: Glassmorphism(
blur: 20,
opacity: 0.1,
radius: 15.0,
child: TextButton(
onPressed: () {
// handle push to HomeScreen
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 15.0,
),
child: Text(
'+ Add successful task',
style: GoogleFonts.nunito(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
),
),
],
),
),
),
),
],
),
),
],
),
),
),
),
);
}
}
为了解决此问题，我尝试将有问题的
ColumnSingleChildScrollViewExpanded这是尝试修复的片段：
SafeArea(
child: Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 20.0),
// Further widgets
],
),
),
),
)
对于文本小部件：
I've also included custom widgets `Glassmorphism` and `SmileFaceCheckbox` in my UI. Could these be affecting layout calculations?
更新：
玻璃态.dart
import 'dart:ui';
import 'package:flutter/material.dart';
class Glassmorphism extends StatelessWidget {
final double blur;
final double opacity;
final double radius;
final Widget child;
const Glassmorphism({
Key? key,
required this.blur,
required this.opacity,
required this.radius,
required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(opacity),
borderRadius: BorderRadius.all(Radius.circular(radius)),
border: Border.all(
width: 1.5,
color: Colors.white.withOpacity(0.2),
),
),
child: child,
),
),
);
}
}
笑脸.dart
import 'package:flutter/material.dart';
class SmileFaceCheckbox extends StatefulWidget {
final double height;
final bool isActive;
final VoidCallback onPress;
final Color activeColor;
final Color deactiveColor;
const SmileFaceCheckbox({
Key? key,
this.height = 24.0,
required this.isActive,
required this.onPress,
}) : activeColor = const Color.fromARGB(255, 116, 217, 48),
deactiveColor = const Color(0xffD94530),
super(key: key);
@override
State<SmileFaceCheckbox> createState() => _SmileFaceCheckboxState();
}
class _SmileFaceCheckboxState extends State<SmileFaceCheckbox>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _animationValue;
void setupAnimation() {
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
_animationValue = CurvedAnimation(
parent: _animationController,
curve: const Interval(0.0, 1.0),
);
}
@override
void initState() {
setupAnimation();
super.initState();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final height = widget.height;
final width = height * 2;
final largeRadius = (height * 0.9) / 2;
final smallRadius = (height * 0.2) / 2;
return GestureDetector(
onTap: widget.onPress,
child: AnimatedBuilder(
animation: _animationController,
builder: (context, _) {
if (widget.isActive) {
_animationController.forward();
} else {
_animationController.reverse();
}
return Container(
height: height,
width: width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(80.0),
color:
widget.isActive ? widget.activeColor : widget.deactiveColor,
),
child: Stack(
alignment: Alignment.center,
children: [
Transform.translate(
offset: Offset(
-largeRadius + largeRadius * 2 * _animationValue.value,
0), // add animation move from -largeRadius to largeRadius
child: Container(
width: largeRadius * 2,
height: largeRadius * 2,
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
child: Stack(
alignment: Alignment.center,
children: [
Transform.translate(
offset: Offset(0, -smallRadius),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: smallRadius * 2,
height: smallRadius * 2,
decoration: BoxDecoration(
color: widget.isActive
? widget.activeColor
: widget.deactiveColor,
shape: BoxShape.circle,
),
),
Container(
width: smallRadius * 2,
height: smallRadius * 2,
decoration: BoxDecoration(
color: widget.isActive
? widget.activeColor
: widget.deactiveColor,
shape: BoxShape.circle,
),
),
],
),
),
Transform.translate(
offset: Offset(0, smallRadius * 2),
child: Container(
width: smallRadius * 4,
height:
widget.isActive ? smallRadius * 2 : smallRadius,
decoration: BoxDecoration(
color: widget.isActive
? widget.activeColor
: widget.deactiveColor,
borderRadius: !widget.isActive
? BorderRadius.circular(22.0)
: const BorderRadius.only(
bottomLeft: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
),
),
),
),
],
),
),
),
],
),
);
},
),
);
}
}
如何解决 Flutter 应用程序中的
RenderFlex overflowed任何见解或解决方案将不胜感激。谢谢！
我认为您可以使用
bottomNavigationBar你可以玩装饰，这取决于你的用户体验你喜欢如何处理滚动事件，你可能喜欢CustomScrollView上的SliverAppBar
class _ToDoPageState extends State<ToDoPage> {
bool isActive = false;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Color.fromARGB(255, 42, 36, 36),
// floatingActionButton: newTaskButton(),
bottomNavigationBar: newTaskButton(),
body: LayoutBuilder(
builder: (context, constraints) => Stack(
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
// child: Image.asset(
// "assets/mountain.jpg",
// fit: BoxFit.cover,
// ),
),
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(23, 8, 23, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'My success list',
style: GoogleFonts.nunito(
color: Colors.white,
fontSize: 30.0,
fontWeight: FontWeight.w500,
),
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(23, 8, 23, 8),
child: Tooltip(
message: 'List options menu',
child: Semantics(
label: 'My success list options menu',
enabled: true,
readOnly: true,
child: IconButton(
icon: const Icon(
Icons.more_vert_outlined,
color: Colors.white,
size: 25,
semanticLabel:
'Pomodoro timer list options menu',
),
onPressed: () {},
),
),
),
),
],
),
Padding(
padding: EdgeInsets.fromLTRB(23, 8, 23, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'Thusrday, December 29, 2022',
style: GoogleFonts.nunito(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.w500,
),
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(23, 8, 23, 8),
child: Align(
alignment: Alignment.center,
child: Glassmorphism(
blur: 5,
opacity: 0.2,
radius: 15,
child: Container(
height: 100,
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
'task 1',
style: GoogleFonts.nunito(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
SmileFaceCheckbox(
isActive: isActive,
onPress: () {
setState(() {
isActive = !isActive;
});
}),
],
),
Align(
alignment: Alignment.topLeft,
child: Text(
'Explain note',
textAlign: TextAlign.center,
style: GoogleFonts.nunito(
color: Colors.white.withOpacity(0.8),
fontSize: 16.0,
),
),
),
],
),
),
),
),
),
//hiint
// SizedBox(
// height: constraints.maxHeight * .4, // your height
// ),
// Align(
// alignment: FractionalOffset.bottomCenter,
// child: newTaskButton(),
// ),
],
),
),
],
),
),
),
);
}
Column newTaskButton() {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
child: Glassmorphism(
blur: 20,
opacity: 0.1,
radius: 15.0,
child: TextButton(
onPressed: () {
// handle push to HomeScreen
},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 10.0,
horizontal: 15.0,
),
child: Text(
'+ Add successful task',
style: GoogleFonts.nunito(
color: Colors.white,
fontSize: 20.0,
),
),
),
),
),
),
],
);
}
}