如何将文本与另一个角色的顶部结合？

发布于 2025-01-31 18:26:22 字数 682 浏览 3 评论 0原文

我想将一组数字与另一组数字的顶部保持一组，就像在某些价格标签上可以找到的最小货币单位一样。

我已经放置了两个text在行中， crossaxisalignment.start，但我无法让它们两个是相同的高度。

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      '409',
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w600,
      ),
    ),
    Text(
      '00',
      style: TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w600,
      ),
    ),
  ]
)

原文

I would like to align one set of numbers to the top of another set of numbers, just as the smallest currency units that can be found on some price tags.

I've placed two Text inside a Row with CrossAxisAlignment.start but I can't get them both to be the same height.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      '409',
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w600,
      ),
    ),
    Text(
      '00',
      style: TextStyle(
        fontSize: 12,
        fontWeight: FontWeight.w600,
      ),
    ),
  ]
)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

勿忘初心 2025-02-07 18:26:22

您需要为其使用RichText。您可以使用widgetspan将文本对齐到顶部。

您可以从下面的示例代码中获取参考：

RichText(
              text: const TextSpan(style: TextStyle(fontSize: 20), children: [
                WidgetSpan(
                    alignment: PlaceholderAlignment.top,
                    child: Text(
                      '\
输出如下：
   
,
                      style: TextStyle(fontSize: 12),
                    )),
                TextSpan(text: '400'),
                WidgetSpan(
                    alignment: PlaceholderAlignment.top,
                    child: Text(
                      '00',
                      style: TextStyle(fontSize: 12),
                    )),
              ]),
            )

输出如下：

You need to use RichText for it. You can use WidgetSpan to align the text to the top.

You can take reference from the sample code below:

RichText(
              text: const TextSpan(style: TextStyle(fontSize: 20), children: [
                WidgetSpan(
                    alignment: PlaceholderAlignment.top,
                    child: Text(
                      '\
And output is below:

,
                      style: TextStyle(fontSize: 12),
                    )),
                TextSpan(text: '400'),
                WidgetSpan(
                    alignment: PlaceholderAlignment.top,
                    child: Text(
                      '00',
                      style: TextStyle(fontSize: 12),
                    )),
              ]),
            )

And output is below:

回复收藏 0 原文

眼中杀气 2025-02-07 18:26:22

它导致文本小部件具有填充。如果键入以下类似的字符，则需要填充。

Container(
          color: Colors.green,
          child: Text(
                  'Ğ ğ, H h, X x, I ı, İ i',
                   style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w600,
                 ),
             ),
     ),

可能这不是实现您想要的最佳实践。您可以通过将高度设置为0.8或其他值来尝试此代码。

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          color: Colors.green,
          child: Text(
                '409',
                 style: TextStyle(
                   fontSize: 20,
                   height: 0.8,
                   fontWeight: FontWeight.w600,
                ),
          ),
        ),
        Container(
          color: Colors.yellow,
          child: Text(
                 '00',
                 style: TextStyle(
                   fontSize: 12,
                   height: 0.8,
                   fontWeight: FontWeight.w600,
                 ),
          ),
        ),
      ]
  ),

It caused Text widget has padding. The padding is needeed if you type some character like below.

Container(
          color: Colors.green,
          child: Text(
                  'Ğ ğ, H h, X x, I ı, İ i',
                   style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w600,
                 ),
             ),
     ),

May this is not the best practice to achieve what you want. You can try this code by setting height to 0.8 or other value.

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          color: Colors.green,
          child: Text(
                '409',
                 style: TextStyle(
                   fontSize: 20,
                   height: 0.8,
                   fontWeight: FontWeight.w600,
                ),
          ),
        ),
        Container(
          color: Colors.yellow,
          child: Text(
                 '00',
                 style: TextStyle(
                   fontSize: 12,
                   height: 0.8,
                   fontWeight: FontWeight.w600,
                 ),
          ),
        ),
      ]
  ),