颤振 - 对齐底部没有到达底部
Posted
技术标签:
【中文标题】颤振 - 对齐底部没有到达底部【英文标题】：Flutter - Align bottom doesn't reach bottom 【发布时间】：2021-08-15 17:07:05 【问题描述】：这是我的应用程序的主页，这里我使用列来显示页面的内容：包含每日动漫的容器和故事滚动容器。
默认情况下，一切正常，但是，当我滚动故事（ListView）时，会出现裂缝（见附件），所以渐变没有到达尽头。有什么问题？
截图：
Before scroll
After scroll
代码sn-p：
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 510,
width: double.infinity,
child: Stack(fit: StackFit.expand, children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://img5.goodfon.ru/wallpaper/nbig/3/59/shingeki-no-kyojin-ataka-titanov-parni-eren-levi.jpg'),
fit: BoxFit.cover)),
)),
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity,
height: 510,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0x15161a),
Color(0x2d15161a),
Color(0xff18191e)
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter)),
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Вторжение титанов',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 40,
)),
SizedBox(height: 5),
Text(
'Attack of titans',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 20,
),
),
SizedBox(height: 80),
Row(
children: [
Text(
'приключения',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
SizedBox(
width: 16,
),
Text(
'2021',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
SizedBox(
width: 16,
),
Text(
'18+',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
],
),
SizedBox(
height: 10,
)
]))))
])),
SizedBox(
height: 15,
),
Container(
height: 100,
child: ListView(
physics: BouncingScrollPhysics(),
scrollDirection: Axis.horizontal,
children: [
Row(
children: [
SizedBox(
width: 11,
),
Column(
children: [
CircleAvatar(
radius: 37,
backgroundColor: Color(0xffdddddd),
child: CircleAvatar(
radius: 36,
backgroundColor: Color(0xff1e1f23),
child: CircleAvatar(
radius: 34,
backgroundImage: NetworkImage(
'https://picsum.photos/200/300'),
),
)),
SizedBox(
height: 9,
),
Text(
'Новое',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 11,
),
),
],
),
SizedBox(
width: 9,
),
Column(
children: [
CircleAvatar(
radius: 37,
backgroundColor: Color(0xffdddddd),
child: CircleAvatar(
radius: 36,
backgroundColor: Color(0xff1e1f23),
child: CircleAvatar(
radius: 34,
backgroundImage: NetworkImage(
'https://picsum.photos/200/300'),
),
)),
SizedBox(
height: 9,
),
Text(
'Новое',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 11,
),
),
],
),
SizedBox(
width: 9,
),
Column(
children: [
CircleAvatar(
radius: 37,
backgroundColor: Color(0xffdddddd),
child: CircleAvatar(
radius: 36,
backgroundColor: Color(0xff1e1f23),
child: CircleAvatar(
radius: 34,
backgroundImage: NetworkImage(
'https://picsum.photos/200/300'),
),
)),
SizedBox(
height: 9,
),
Text(
'Новое',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 11,
),
),
],
),
SizedBox(
width: 9,
),
Column(
children: [
CircleAvatar(
radius: 37,
backgroundColor: Color(0xffdddddd),
child: CircleAvatar(
radius: 36,
backgroundColor: Color(0xff1e1f23),
child: CircleAvatar(
radius: 34,
backgroundImage: NetworkImage(
'https://picsum.photos/200/300'),
),
)),
SizedBox(
height: 9,
),
Text(
'Новое',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 11,
),
),
],
),
SizedBox(
width: 9,
),
Column(
children: [
CircleAvatar(
radius: 37,
backgroundColor: Color(0xffdddddd),
child: CircleAvatar(
radius: 36,
backgroundColor: Color(0xff1e1f23),
child: CircleAvatar(
radius: 34,
backgroundImage: NetworkImage(
'https://picsum.photos/200/300'),
),
)),
SizedBox(
height: 9,
),
Text(
'Новое',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 11,
),
),
],
),
SizedBox(
width: 9,
),
Column(
children: [
CircleAvatar(
radius: 37,
backgroundColor: Color(0xffdddddd),
child: CircleAvatar(
radius: 36,
backgroundColor: Color(0xff1e1f23),
child: CircleAvatar(
radius: 34,
backgroundImage: NetworkImage(
'https://picsum.photos/200/300'),
),
)),
SizedBox(
height: 9,
),
Text(
'Новое',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 11,
),
),
],
),
],
)
]),
),
SizedBox(
height: 37,
),
Padding(
padding: EdgeInsets.fromLTRB(11, 0, 0, 11),
child: Column(
children: [
Text(
'Новинки',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 30,
),
),
],
),
),
],
)
【问题讨论】：
将margin: EdgeInsets.only(bottom:1) 添加到您的 Container() 内的 Positioned.fill() 中，这样就不会出现工件线了。
@ChiragBargoojar 谢谢！这行得通！
【参考方案1】：
在Positioned.fill() 中添加margin: EdgeInsets.only(bottom:1) 到Container() 解决了这个问题。
@ChiragBargoojar 的解决方案
【讨论】：
以上是关于颤振 - 对齐底部没有到达底部的主要内容，如果未能解决你的问题，请参考以下文章
有没有更好的方法在水平轴上底部对齐 flex-box div？
将按钮与没有 ListView 间隔的 Xamarin.Forms 网格底部对齐
Android View在没有XML的情况下对齐底部（以编程方式）