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
相关产品推荐
相关产品推荐

