Question

我想在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来包装Text？

Answer 1

您可以将 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),
      ),
    ],
  ),
),

Answer 2

不使用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 3

如果突出显示的文本足够短（因此您不想在其中换行），则可以使用由TextSpan插入的WidgetSpan。

例如：

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

Answer 4

如果要在Flutter中设置文本字段的圆角，则只能使用Container；如果要避免Container，则还有另一种方法，必须避免将ListView用作应用程序的主体。如果您只想在屏幕上添加单个项目，则可以尝试不使用容器，但是如果有多个项目，那么您无需执行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"),
                  )),
            ),

Answer 5

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

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

这是带有背景、半径和填充的文本示例图像。

希望这可以帮助任何需要它的人。

github 存储库的链接如下：https://github.com/Letalus/auto_size_text_background

如何在Flutter中设置TextSpan的圆角

5 个答案: