如何在颤振中设置TextSpan的圆角

Question

我想在flutter中设置Textspan的圆角，我认为需要Paint类，但我想不出该怎么做。

​

​

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(),
        body: new RichText(
          text: new TextSpan(
            text: null,
            style: TextStyle(fontSize: 20.0, color: Colors.black),
            children: <TextSpan>[
              new TextSpan(
                text: 'inactive ',),
              new TextSpan(
                  text: 'active',
                  style: new TextStyle(
                    color: Colors.white,
                    background: Paint()
                      ..color = Colors.redAccent,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

有没有一种方法可以不使用Container包装Text而使用Textspan来实现这一点？

Answer 1

在不使用Container或其他工具的情况下，我只能看到一种使角变圆角的方法

TextSpan(
    text: 'active',
    style: TextStyle(
        fontSize: 20.0,
        color: Colors.white,
        background: Paint()
          ..strokeWidth = 24.0
          ..color = Colors.red
          ..style = PaintingStyle.stroke
          ..strokeJoin = StrokeJoin.round))

但在这种情况下，文本周围有填充，所以我怀疑这是不是正确的方式

Answer 2

您可以在WidgetSpan中使用RichText，然后将其与行高结合使用

RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Container(
          child: Text(
            addressItem.deliveryAddressType == "home" ? "Nhà" : "Văn phòng",
            style: TextStyle(
              fontFamily: AppFonts.SFUITextMedium,
              color: AppColors.wram_grey,
              fontSize: AppFonts.textSizeSmall,
            ),
          ),
          decoration: BoxDecoration(
              color: AppColors.header_grey, borderRadius: BorderRadius.all(Radius.circular(20))),
          padding: EdgeInsets.fromLTRB(6, 2, 6, 2),
          margin: EdgeInsets.only(right: 5),
        ),
      ),
      TextSpan(
        text: '${addressItem.street}, ${addressItem.ward}, ${addressItem.city}, ${addressItem.region}',
        style: TextStyle(
            fontFamily: AppFonts.SFUITextMedium,
            color: AppColors.wram_grey,
            fontSize: AppFonts.textSizeMedium,
            height: 1.5),
      ),
    ],
  ),
),

​

​

Answer 3

如果突出显示的文本足够短(所以你不想在其中换行)，你可以只使用WidgetSpan insted of TextSpan。

例如：

RichText(
            textAlign: TextAlign.center,
            text: TextSpan(
              children: [
                TextSpan(
                  text: "some text",
                ),
                WidgetSpan(
                  child: Container(
                    padding: EdgeInsets.symmetric(vertical: 1),
                    decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(999),
                    ),
                    child: IntrinsicWidth(
                      child: Text(
                        "some text",
                      ),
                    ),
                  )
                ),
                TextSpan(text: "some text"),
              ],
            ),
          ),