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

问题描述

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

I have not worked with canvas in flutter but I think that edit text box like the one in the image can be achieved by canvas. The background expands with the text length and if the text length in a line is 0 then there is no background.

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

If you have any code or suggestions to do so, then please help.

推荐答案

代码如下:

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 以按您选择的颜色填充所有文本.

The strokeWidth should be larger than the fontSize to fill all the text by the color you choose.

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

Try to play with it so that you end up with more accurate result.

这篇关于如何在画布上制作自定义可编辑文本框，其中背景随文本传播?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！