text editor & text field layout issue in list

I need use a built-in text editor, a custom text editor and a built-in text field in the same list. I encounter a couple of problems:

  1. set font to .body: The row height of custom text editor is bigger than the other two. The custom text editor can't stay in the center of the row by vertical. The text editor can't align to text field by leading.

  2. set font to .title: In addition to problem 1 behavior, the built-in text editor can't stay in the center of the row by vertical either.

How could I make the three components to have the same row height and align center in vertical and align by leading?

struct ContentView: View {

    @State private var text = "hello"

    @State private var text2 = ""

    var body: some View {

        List{

            Section("title"){

                CustomTextEditor(text: $text)

                TextEditor(text: $text)

                    .font(.title)

                TextField("hello", text: $text2)

                    .font(.title)

            }

        }

    }

}

struct CustomTextEditor: UIViewRepresentable{

    @Binding var text: String

    

    func makeUIView(context: Context) -> UITextView {

        let textView = UITextView()

        textView.isScrollEnabled = false

        textView.font = UIFont.preferredFont(forTextStyle: .title1)

        textView.text = text

        return textView

    }

    func updateUIView(_ uiView: UITextView, context: Context) {

        

    }

}
text editor & text field layout issue in list
 
 
Q