Flutter动画重叠显示报错解决方法：将动画放在ScrollView下方
我想要让这个动画在所有元素的下面，重叠显示，但是报错了，可以给我改后的代码吗，最好是还是scrollview否则布局会乱[ +7 ms] Another exception was thrown: RenderPointerListener does not meet its constraints. [ +5 ms] Another exception was thrown: RenderRepaintBoundary does not meet its constraints. 我的代码是SideMenu( background: Global.home_currentcolor, key: _sideMenuKey, menu: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 50.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.only(left: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ TextButton( onPressed: () => Global().getrecently(context), child: Text( shijian(), style: TextStyle(color: Colors.white), ), ), SizedBox(height: 20.0), ], ), ), Positioned( top: 0, child: Container( //缩小0.5倍 child: RiveAnimation.asset( 'assets/cat.riv', animations: ['Sulamine'], controllers: [_controller3], ), ), ), ListTile( leading: const Icon(Icons.cached, size: 20.0, color: Colors.white), title: Text( '查看成绩', style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold), ), onTap: () => Navigator.of(context).push( MaterialPageRoute( builder: (context) => scorepage(), ), ), ), ListTile( leading: const Icon(Icons.score_outlined, size: 20.0, color: Colors.white), title: Text( 'chatgpt', style: TextStyle( color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold), ), onTap: () { Navigator.of(context).pop(); //关闭侧边栏
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
chat_gpt()));
}),
ListTile(
leading: const Icon(Icons.book_online,
size: 20.0, color: Colors.white),
title: Text(
'一键评教',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.of(context).pop(); //关闭侧边栏
Global()
.No_perception_login()
.then((value) => null);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => pingjiao()));
},
),
ListTile(
leading: const Icon(Icons.book_online,
size: 20.0, color: Colors.white),
title: Text(
'请假历史',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.of(context).pop(); //关闭侧边栏
Global()
.No_perception_login()
.then((value) => null);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => qingjia()));
},
),
ListTile(
leading: const Icon(Icons.colorize,
size: 20.0, color: Colors.white),
title: Text(
'调个色',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
showDialog(
context: context,
builder: (context) {
return MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: AlertDialog(
title: Text('选择当前页颜色'),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: Global
.home_currentcolor,
onColorChanged: changeColor,
colorPickerWidth: 300.0,
pickerAreaHeightPercent:
0.7,
enableAlpha: false,
displayThumbColor: true,
showLabel: true,
paletteType:
PaletteType.hsv,
pickerAreaBorderRadius:
const BorderRadius.only(
topLeft:
const Radius.circular(
2.0),
topRight:
const Radius.circular(
2.0),
),
),
),
actions: <Widget>[
TextButton(
child: const Text('确定'),
onPressed: () async {
setState(() => Global
.home_currentcolor = Global
.home_pickcolor);
getApplicationDocumentsDirectory()
.then((value) {
File file = File(
value.path + '/color.txt');
//判断文件是否存在
if (file.existsSync()) {
//存在则写入
file.writeAsString(Global
.home_currentcolor
.value
.toString());
} else {
//不存在则创建文件并写入
file.createSync();
file.writeAsString(Global
.home_currentcolor
.value
.toString());
}
});
Navigator.of(context)
.pop();
},
),
],
));
});
},
),
ListTile(
leading: const Icon(Icons.score_outlined,
size: 20.0, color: Colors.white),
title: Text(
'查看学习通已批完的考试但未发布的成绩',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.of(context).pop(); //关闭侧边栏
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
chaoxinglogin()));
}),
ListTile(
leading: const Icon(Icons.cached,
size: 20.0, color: Colors.white),
title: Text(
'重新登入',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
deleteFile();
AchievementView(context,
title: '成功!',
subTitle: '已清除课程和成绩缓存，请退出app重新登录',
//onTab: _onTabAchievement,
icon: Icon(
Icons.insert_emoticon,
color: Colors.white,
),
//typeAnimationContent: AnimationTypeAchievement.fadeSlideToUp,
//borderRadius: 5.0,
color: Colors.green,
//textStyleTitle: TextStyle(),
//textStyleSubTitle: TextStyle(),
//alignment: Alignment.topCenter,
duration: Duration(seconds: 3),
isCircle: true, listener: (status) {
print(status);
}) .show();
},
),
ListTile(
leading: const Icon(Icons.settings,
size: 20.0, color: Colors.white),
title: Text(
'关于&设置',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => about(),
);
},
),
],
),
),将您的 SingleChildScrollView 包装在 Positioned 小部件中，并将其 top 属性设置为负值，使其与其他元素重叠。以下是一个示例：
Positioned( top: -50.0, child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 50.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ // 您其他菜单项在这里 ], ), ), )
解决方法：
-
使用 Positioned 将动画元素包装起来： 将你的动画元素（例如
RiveAnimation或其他动画组件）使用Positioned小部件包装起来，并设置top属性为负值，例如top: -50.0。这会使动画元素位于ScrollView的上方并重叠显示。 -
调整
SingleChildScrollView的padding： 由于你将动画元素放在ScrollView的上面，所以可能需要调整SingleChildScrollView的padding属性，以避免动画元素遮挡ScrollView内容。 -
检查动画元素的布局约束： 如果你的动画元素的布局约束不正确，可能会导致渲染错误。确保你正确地设置了动画元素的
size和position属性。 -
使用
Stack布局： 如果你想要更灵活地控制动画元素和ScrollView的位置，可以使用Stack布局，将ScrollView和动画元素都作为Stack的子元素，并通过调整它们的position属性来实现重叠显示。
修改后的代码：
SideMenu(
background: Global.home_currentcolor,
key: _sideMenuKey,
menu: Column(
children: [
// Your animation element here (e.g., RiveAnimation)
Positioned(
top: -50.0,
child: Container(
child: RiveAnimation.asset(
'assets/cat.riv',
animations: ['Sulamine'],
controllers: [_controller3],
),
),
),
SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 70.0), // Adjust padding as needed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Your other menu items here
],
),
),
],
),
)
注意：
- 将
top属性设置为负值会使动画元素向上移动，与ScrollView内容重叠。 - 调整
padding属性可以避免动画元素遮挡ScrollView内容。 - 确保你的动画元素的布局约束正确，避免渲染错误。
通过以上方法，你就可以成功地在 Flutter 中将动画元素放在 ScrollView 下方并重叠显示。
原文地址: https://www.cveoy.top/t/topic/ocst 著作权归作者所有。请勿转载和采集!