如何在Flutter中使富文本垂直居中对齐？

Question

import 'package:flutter/material.dart';

class DraftPage extends StatefulWidget {
  DraftPage({Key key}) : super(key: key);

  @override
  _DraftPageState createState() => _DraftPageState();
}

class _DraftPageState extends State<DraftPage> {
  @override
  Widget build(BuildContext context) {
    final bottomTextStyle = TextStyle(
      fontSize: 12,
      fontWeight: FontWeight.w500,
      color: Colors.red,
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: Container(
        alignment: Alignment.center,
        width: 300,
        height: 57,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
        child: Text.rich(
          TextSpan(
            children: [
              TextSpan(
                text: 'AB',
                style: bottomTextStyle,
              ),
              TextSpan(
                text: 'CD',
                style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.w500,
                  color: Colors.blue,
                ),
              ),
              TextSpan(
                text: 'EF',
                style: bottomTextStyle,
              ),
            ],
          ),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

正如您所见，尽管我设置了 TextAlign.center，但 AB 和 EF 位于 CD 底部。

有没有办法让 AB CD EF 垂直居中对齐？

- 无夜之星辰

Answer 1

结果

代码

Text.rich(
          TextSpan(
            children: <InlineSpan>[
              TextSpan(
                text: 'AB',
                style: bottomTextStyle,
              ),
              WidgetSpan(
                alignment: PlaceholderAlignment.middle,
                child: Text(
                  'CD',
                  style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w500,
                    color: Colors.blue,
                  ),
                ),
              ),
              TextSpan(
                text: 'EF',
                style: bottomTextStyle,
              ),
            ],
          ),
        ),

- Yeasin Sheikh

---

谢谢你，这个 alignment: PlaceholderAlignment.middle 解决了问题。 - MBH

Answer 2

try this:

child: Text.rich(
          TextSpan(
            children: [
              TextSpan(
                text: 'AB\n',
                style: bottomTextStyle,
              ),
              TextSpan(
                text: 'CD\n',
                style: TextStyle(
                  fontSize: 40,
                  fontWeight: FontWeight.w500,
                  color: Colors.blue,
                ),
              ),
              TextSpan(
                text: 'EF',
                style: bottomTextStyle,
              ),
            ],
          ),
          textAlign: TextAlign.center,
        ),

- Jim

---

textAlign不是用于水平对齐吗？ - Kram

Answer 3

您可以使用row在一行居中。

Container(
        width: 300,
        height: 57,
        decoration: BoxDecoration(
          color: Colors.yellow,
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("AB", style: bottomTextStyle,),

            Text("CD", style: TextStyle(
              fontSize: 40,
              fontWeight: FontWeight.w500,
              color: Colors.blue,
            ),),

            Text("EF", style: bottomTextStyle,),

          ],
        )
      ),

- Lakshan Costa

---

问题明确要求富文本。 - Ataberk