如何解决如何在Flutter中溢出的情况下将小部件放置在其容器外部的水平列表中?
我尝试过的事情:
Container(
height: 60,child: ListView.separated(
scrollDirection: Axis.horizontal,itemCount: 7,separatorBuilder: (context,index) => SizedBox(
width: 5,),itemBuilder: (context,index) {
if (index == 0) {
return Stack(
clipBehavior: Clip.none,children: [
Container(
width: 60,color: Colors.blueAccent,Positioned(
left: 25,bottom: -25,child: Container(
child: Text(
'Lorem ipsum dolor sit amet,consectetur adipiscing elit.',color: Colors.amberAccent,height: 30,],);
} else {
return Container(
width: 60,);
}
},
这是no horizontal scroll(少于7个项目数)的样子。看起来像with horizontal scroll。
如何将文本放置在其他小部件前面的堆栈外部?
解决方法
我希望这对您有用。
确保Stack = Overflow的溢出属性。可见,否则容器的溢出部分将被裁剪。
height of child component=60
height of tooltip=20
positioned at bottom 0 placing it at bottom of the parent. Be careful with the sizes.
return SizedBox(
height: 70,child: SingleChildScrollView(
scrollDirection: Axis.horizontal,child: Stack(
overflow: Overflow.visible,children: [
Row(
children: [
//build your children here..
Container(
margin: EdgeInsets.only(left: 12),width: 60,height: 60,color: Colors.blueAccent,),Container(
margin: EdgeInsets.only(left: 12),],//build the tooltip here.
Positioned(
left: 25,bottom: 0,child: Container(
child: Text(
'Lorem ipsum dolor sit amet,consectetur adipiscing elit.',color: Colors.amberAccent,height: 20,);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。