You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter组件对齐异常:同一组件在不同屏幕表现不一致

Flutter餐食列表组件对齐异常排查求助

我开发了一个展示餐食列表的Flutter 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();
        },
      ),
    );
  }

组件运行效果

  • 正常显示的组件:
    正常显示的组件

  • 显示异常的组件:
    显示异常的组件

恳请各位帮忙排查解决该问题。

内容的提问来源于stack exchange,提问作者Matthias Felder

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.30 23:16:00