如何在 Flutter 中设置 TextSpan 的圆角

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 来实现这一点而不是使用Containerwrapping Text？

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

如果你想在 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"),
                  )),
            ),