You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

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的crossAxisAlignmentstart,给首尾的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

火山引擎 最新活动