如何在Flutter中设置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,
                  )),
            ],
          ),
        ),
      ),
    );
  }
}

有没有一种使用Textspan来实现这个而不是使用包装文本的Container的方法？

- user6456568

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))

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

- Andrii Turkovskyi

---

如果我将strokeWidth设置为1，边框就不可见了。我能配置边框半径吗？ - user3875388

似乎你不能这样做。正如我所说 - 我怀疑这不是正确的方法，因为它几乎无法自定义。 - Andrii Turkovskyi

谢谢。也许需要一个堆栈并计算位置来解决问题。 - user3875388

我希望我们有“PiantingStyle.both”。 - Furkan Sarihan

Answer 2

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

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),
      ),
    ],
  ),
),

- Quang Duy Tran

Answer 3

我创建了一个软件包，可以自定义文本的背景-->您可以更改文本背景的半径、填充和颜色。

这是AutoSizeText小部件的一个分支，因此如果需要，您甚至可以自动调整文本大小。

以下是带有背景、边角半径和填充的文本示例图像。

希望这能够帮助需要的任何人。

Github仓库链接如下: https://github.com/Letalus/auto_size_text_background

- Christian X

Answer 4

如果需要高亮的文本很短（不需要断行），您可以使用WidgetSpan而不是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"),
              ],
            ),
          ),

- Donát Pesti

Answer 5

如果你想在Flutter中设置文本字段的圆角，你只能使用容器(Container)。如果你想避免使用容器，那么有另外一种方法，就是避免将ListView作为应用程序的主体(body)。如果你只想在屏幕上添加一个单独的项目，那么你可以尝试不使用容器，但如果有多个项目，那么你必须实现ListView，并添加多个容器以达到不同的目的。

new Container(
              height: 80.0,
              color: Colors.transparent,
              child: new Container(
                  decoration: new BoxDecoration(
                      color: Colors.green,
                      borderRadius: new BorderRadius.only(
                          topLeft: const Radius.circular(30.0),
                          topRight: const Radius.circular(30.0),
                          bottomLeft: const Radius.circular(30.0),
                          bottomRight: const Radius.circular(30.0))),
                  child: new Center(
                    child: new Text("Active text"),
                  )),
            ),

- Stuti Kasliwal

---

谢谢，我知道它会起作用。但在我的应用程序中，我需要使文章中的每个单词（由空格分隔）可点击。然而，如果我为每个单词创建一个Text，那么在某些行中，该行的第一个单词是空格，因此在开头没有对齐。示例 - user6456568

为了避免文本开头或结尾的空格，您可以使用 trim() 函数来从字符串中删除额外的空格。这样行不行？ - Stuti Kasliwal

我正在使用 Wrap(children: articleStr.split(' ').map((w) => Text(w)).toList())，但我不知道哪一行的第一个组件是具有空格内容的 Text。 - user6456568