flutter - 如何在画布上制作自定义可编辑文本框，其中背景随文本传播？

Question

我没有在颤振中使用过画布，但我认为像图像中的那个编辑文本框可以通过画布来实现。背景随着文本长度扩展，如果一行中的文本长度为 0，则没有背景。

如果您有任何代码或建议，请提供帮助。

标签： flutterflutter-layoutflutter-canvas

Answer 1

这里的代码：

class TextFieldTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 50),
          child: TextField(
            maxLines: 10,
            keyboardType: TextInputType.multiline,
            textAlign: TextAlign.center,
            style: TextStyle(
              wordSpacing: 5,
              height: 2,
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 26,
              background: Paint()
                ..color = Colors.blue
                ..style = PaintingStyle.stroke
                ..strokeWidth = 35
                ..strokeJoin = StrokeJoin.round,
            ),
          ),
        ),
      ),
    );
  }
}

strokeWidth 应大于 fontSize 以按您选择的颜色填充所有文本。

尝试使用它，以便最终获得更准确的结果。