导言

对于一个默认的 TextEditor：

@State private var userInput: String = ""
...
TextEditor(text: $userInput)

它的输入光标如下图

默认的样式实在是有点太难看，光标具体顶部距离基本上没有的，看着很拥挤的感觉，所以增加光标距离边框的距离会让组件好看一些。

方案

padding

TextEditor 本身不存在这样子的参数去设置，但是我们其实可以通过增加内边距的方法去实现这个需求。在默认情况下，TextEditor它的内容（文本和光标）会紧贴着它的边界，我们增加内边距就可以让它的内容远离它的边界。

实际上当你添加了 padding 之后，你只发现了输入框的大小变小了，其他的并没有发生变化。

这个时候我们可以试着加个 border

   TextEditor(text: $userInput)
	.padding(8)
	.border(.red)

再看渲染的结果：

![[../assets/Screenshot 2025-08-31 at 17.02.27.png]]

如果让 TextEditor的背景颜色统一，是不是问题就解决了？

background

  TextEditor(text: $userInput)
   .padding(8)
   .background(Color(nsColor: .controlBackgroundColor))

看一下这个时候渲染结果

是的，完美解决！