英文:
Flutter - Strange Widget Alignment behavior
问题
这里是您要翻译的代码部分：
我有一个小部件，显示其中的一组餐点。在一个屏幕上，它对齐得很好，而在另一个屏幕上，文本对齐到底部，并且有一个无法解释的项目之上留有空白。为演示目的，我添加了一个红色容器：
这是小部件：
Widget buildFoodItem() {
return SizedBox(
width: 130,
child: Stack(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(top: 32, left: 8, right: 8, bottom: 15),
child: Container(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: fumigruen,
offset: const Offset(1.1, 4.0),
blurRadius: 8.0),
],
gradient: LinearGradient(
colors: [
fumigruen,
fumigruen_accent,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: const BorderRadius only(
bottomRight: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
topLeft: Radius.circular(8.0),
topRight: Radius.circular(54.0),
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 30, left: 10, right: 10, bottom: 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"${widget.mahlzeit}",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
letterSpacing: 0.2,
color: Colors.white,
),
),
Expanded(
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.only(top: 2, bottom: 8),
child: buildItemList(),
),
),
),
(totalMJ != 0)
? Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"${totalMJ.toStringAsFixed(1)}",
textAlign: TextAlign center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 24,
letterSpacing: 0.2,
color: Colors white,
),
),
Padding(
padding:
const EdgeInsets.only(left: 4, bottom: 3),
child: Text(
'MJ',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
letterSpacing: 0.2,
color: Colors white,
),
),
),
],
)
: Container(),
Positioned(some icons),
Positioned(some icons),
],
),
),
),
),
],
),
);
}
Widget buildItemList() {
return SingleChildScrollView(
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.futterplan.lRationOfFutterplan!.length,
itemBuilder: (context, index) {
final item = widget.futterplan.lRationOfFutterplan![index];
return (item.mahlzeit == widget.mahlzeit)
? Text(
'${item.fFuttermittel!.name!}',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 10,
color: Colors white,
),
)
: Container();
},
),
);
}
这里是您提供的小部件的代码部分的翻译。
英文:
I have a widget I build, showing a list of meals in it. On one screen it aligns perfectly, on another screen the text is aligned to the bottom and there is a space over the items I cant explain. I added a red container for demonstration purposes:
Here is the widget:
Widget buildFoodItem() {
return SizedBox(
width: 130,
child: Stack(
children: <Widget>[
Padding(
padding:
const EdgeInsets.only(top: 32, left: 8, right: 8, bottom: 15),
child: Container(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color: fumigruen,
offset: const Offset(1.1, 4.0),
blurRadius: 8.0),
],
gradient: LinearGradient(
colors: [
fumigruen,
fumigruen_accent,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: const BorderRadius.only(
bottomRight: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
topLeft: Radius.circular(8.0),
topRight: Radius.circular(54.0),
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 30, left: 10, right: 10, bottom: 0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"${widget.mahlzeit}",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
letterSpacing: 0.2,
color: Colors.white,
),
),
Expanded(
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.only(top: 2, bottom: 8),
child: buildItemList(),
),
),
),
(totalMJ != 0)
? Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"${totalMJ.toStringAsFixed(1)}",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 24,
letterSpacing: 0.2,
color: Colors.white,
),
),
Padding(
padding:
const EdgeInsets.only(left: 4, bottom: 3),
child: Text(
'MJ',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 14,
letterSpacing: 0.2,
color: Colors.white,
),
),
),
],
)
: Container(),
Positioned(some icons),
Positioned(some icons),
],
),
),
),
),
],
),
);
}
Widget buildItemList() {
return SingleChildScrollView(
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.futterplan.lRationOfFutterplan!.length,
itemBuilder: (context, index) {
final item = widget.futterplan.lRationOfFutterplan![index];
return (item.mahlzeit == widget.mahlzeit)
? Text(
'${item.fFuttermittel!.name!}',
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 10,
color: Colors.white,
),
)
: Container();
},
),
);
}
and here are the pictures of the widget in action
the correct working widget
same widget but not working properly
many thanks in advance for helping me out
答案1
得分: 0
在此链接中找到了答案：https://stackoverflow.com/questions/63639472/flutter-unexpected-space-at-the-top-of-listview
看起来有一个可以通过插入以下内容来避免的填充：
padding: EdgeInsets.zero,
唯一奇怪的是，我只需要在一个特定屏幕上使用这行代码，而不需要在另一个我也在使用该小部件的屏幕上使用它。
英文:
Found an answer here: https://stackoverflow.com/questions/63639472/flutter-unexpected-space-at-the-top-of-listview
It seems that there was a padding that could be avoidded by inserting
padding: EdgeInsets.zero,
The only strange thing was, that i needed the code line for onw specific screen and not on the other screen where i was also using that widget.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论