Flutter:如何在Row组件中分别对齐不同Text Widget的垂直位置
实现首尾文本分别上下对齐的Row排版
刚好我之前也做过类似的引号排版需求,其实核心就是不要用Row的统一crossAxisAlignment来控制所有子组件,而是给首尾的文本单独指定垂直对齐位置,这里有两种简单可行的方案:
方案一:用Align组件控制对齐
把Row的crossAxisAlignment设为CrossAxisAlignment.stretch,让所有子组件垂直填满Row的高度,然后用Align组件分别给首尾文本指定顶部和底部对齐:
return Row( crossAxisAlignment: CrossAxisAlignment.stretch, // 让子组件撑满Row的垂直高度 children: <Widget>[ Align( alignment: Alignment.topCenter, // 第一个引号顶部对齐 child: Container( padding: const EdgeInsets.symmetric(horizontal: 10.0), child: Text('"'), ), ), Expanded( child: Text( entry.text, style: style, ), ), Align( alignment: Alignment.bottomCenter, // 第二个引号底部对齐 child: Container( padding: const EdgeInsets.symmetric(horizontal: 10.0), color: Colors.yellow, child: Text('”'), ), ), ], );
方案二:给Container设置高度并指定对齐
保持Row的crossAxisAlignment为start,给首尾的Container设置height: double.infinity,让它们和中间的多行文本高度一致,再通过Container的alignment属性控制内部Text的位置:
return Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( padding: const EdgeInsets.symmetric(horizontal: 10.0), height: double.infinity, // 撑满Row的垂直高度 alignment: Alignment.topCenter, // 顶部对齐 child: Text('"'), ), Expanded( child: Text( entry.text, style: style, ), ), Container( padding: const EdgeInsets.symmetric(horizontal: 10.0), color: Colors.yellow, height: double.infinity, // 撑满Row的垂直高度 alignment: Alignment.bottomCenter, // 底部对齐 child: Text('”'), ), ], );
两种方案都能完美实现你要的效果:第一个引号和多行文本顶部对齐,第二个引号和多行文本底部对齐,完全模仿引号的排版样式。
内容的提问来源于stack exchange,提问作者Andrew




