英文:
flutter - bottom overflow appears and disappears when expanding expansion tile
问题
当展开/收缩扩展面板时，底部溢出将会出现和消失，而屏幕不会出现任何大小问题。
请查看这个简短的GIF：https://drive.google.com/file/d/1xg7hH4zK_aIT04VjQPkRyJ789Lm728R4/view?usp=share_link
这是我正在使用的代码：
Card(
elevation: 0,
margin: EdgeInsets.symmetric(horizontal: 3),
borderOnForeground: false,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
color: kBgLightColor,
child: Padding(
padding: EdgeInsets.only(left: 6.0, right: 6.0, bottom: 12.0),
child: ExpansionTile(
onExpansionChanged: (value) {
setState(() {
isExpansionTileExpanded = value;
});
},
leading: Icon(Icons.filter_list),
tilePadding: EdgeInsets.all(5),
backgroundColor: kBgLightColor,
title: Text('Filters'),
children: <Widget>[
CustomToggleButton(
toggleButtonOption: ToggleButtonOptions.teamOptions,
handler: toggleButtonHandler,
selectedItems: selectedTeamOption,
width: SizeConfig.screenWidth * 0.8,
items: teams,
),
],
),
),
);
任何帮助都将不胜感激。
英文:
When expanding/shrinking expansion tile, the bottom overflow will appear and disappear without the screen having any size issue.
have a look at this short GIF:
https://drive.google.com/file/d/1xg7hH4zK_aIT04VjQPkRyJ789Lm728R4/view?usp=share_link
that is the code I am using:
Card(
elevation: 0,
margin: EdgeInsets.symmetric(horizontal: 3),
borderOnForeground: false,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
color: kBgLightColor,
child: Padding(
padding: EdgeInsets.only(left: 6.0, right: 6.0, bottom: 12.0),
child: ExpansionTile(
onExpansionChanged: (value) {
setState(() {
isExpansionTileExpanded = value;
});
},
leading: Icon(Icons.filter_list),
tilePadding: EdgeInsets.all(5),
backgroundColor: kBgLightColor,
title: Text('Filters'),
children: <Widget>[
CustomToggleButton(
toggleButtonOption: ToggleButtonOptions.teamOptions,
handler: toggleButtonHandler,
selectedItems: selectedTeamOption,
width: SizeConfig.screenWidth * 0.8,
items: teams,
),
],
),
),
);
any help is appreciated.
答案1
得分: 1
问题似乎不在于卡片本身，而在于包裹卡片的内容。我认为适用的方法是使用 Column() 包装，然后使用 SingleChildScrollView，并记得禁用列表滚动物理效果，使用 SingleChildScrollView 的滚动物理效果。
...
SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: SizedBox(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
...///卡片
]
)
)
)
英文:
The problem seems not to be the card but whatever is wrapping the card. I think what would work is wrap with Column() then use SingleChildScrollView and remember to disable the list scroll physics and use SingleChildScrollView's scroll physics.
...
SingleChildScrollView(
physics: const BouncingScrollPhysics(),
child: SizedBox(
height: MediaQuery.of(context).size.height,
width:MediaQuery.of(context).size.width,
child: Column(
children: [
...///card
]
.. )
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论