混合 TextField 和 Text答案

【问题标题】：mixing TextField and Text混合 TextField 和 Text
【发布时间】：2020-12-26 02:26:44
【问题描述】：

我想做这样的观点，有什么建议吗？

【问题讨论】：

文本字段在哪里？
" 这个：黄色；
你的意思是spanable：medium.com/androiddevelopers/…
不，我需要在文本之间插入文本字段

标签： flutter widget flutter-layout textfield

【解决方案1】：

我通过使用WidgetSpan得到解决方案

所以解决方案是这样的：

Text.rich(
                    TextSpan(
                      children: <InlineSpan>[
                        TextSpan(text: '<body ',style: TextStyle(
                          color: Colors.blue,
                          fontSize: 24
                        ),),
                        TextSpan(text: 'style=\n"',style: TextStyle(
                          color: Colors.teal,
                            fontSize: 24
                        ),),
                        WidgetSpan(
                          child: SizedBox(
                              width: 30,
                              height: 30,
                              child: TextField()
                          ),
                        ),
                        TextSpan(text: ':yellow;',style: TextStyle(
                            color: Colors.grey,
                            fontSize: 24
                        ),),
                        TextSpan(text: '\nbackground-color:',style: TextStyle(
                            color: Colors.purple,
                            fontSize: 24
                        ),),
                        TextSpan(text: 'black;',style: TextStyle(
                            color: Colors.grey,
                            fontSize: 24
                        ),),
                        TextSpan(text: '">',style: TextStyle(
                            color: Colors.teal,
                            fontSize: 24
                        ),),
                        TextSpan(text: '\nhi :)',style: TextStyle(
                            color: Colors.grey,
                            fontSize: 24
                        ),),
                        TextSpan(text: '\n</',style: TextStyle(
                            color: Colors.grey,
                            fontSize: 24
                        ),),
                        WidgetSpan(
                          child: SizedBox(
                              width: 30,
                              height: 30,
                              child: TextField()
                          ),
                        ),
                        TextSpan(text: '>',style: TextStyle(
                            color: Colors.grey,
                            fontSize: 24
                        ),),
                      ],
                    )
                )

【讨论】：

【解决方案2】：

如果您只想要这个带有TextField 的视图，您可能需要考虑两件事：

Column class 用于维护下一行中的项目

Row class 用于水平继续项目

代码如下：

请注意： TextField 正在工作。因此，您可以使用它，但请阅读有关用法的信息。它仅用于表示，但如果您想捕获 TextField 中的数据，您可能想使用 TextEditingController 来表示。

        Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // top layer
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text("<body", style: TextStyle(color: Colors.blue[900])),
                SizedBox(width: 8.0),
                Text("style", style: TextStyle(color: Colors.greenAccent)),
                Text("=", style: TextStyle(color: Colors.grey))
              ]
            ),
            
            // Middle layer, for next line
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text("''", style: TextStyle(color: Colors.orange)),
                SizedBox(width: 80.0, child: TextField()), // this is textfield
                Text(":yellow;", style: TextStyle(color: Colors.grey))
              ]
            ),
            
            // Middle layer part 2, for next line
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text("background-color:", style: TextStyle(color: Colors.indigo)),
                Text("black;", style: TextStyle(color: Colors.grey)),
                Text("''>", style: TextStyle(color: Colors.orange))
              ]
            ),
            
            // for next line
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text("hi :)", style: TextStyle(color: Colors.grey[500]))
              ]
            ),
            
            // last line
            Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text("</___________>", style: TextStyle(color: Colors.grey[500]))
              ]
            ),
          ]
        )

这对您来说可能很长，但这将像结果一样为您服务。

【讨论】：

是的，我知道如何手动操作，是否有任何解决方案可以自动执行此视图？或如何根据文本进行操作，例如：“
*h1*>”我想在“*”之间替换文本字段
为此有一个介于"*" 之间的字符串变量，并将其替换为输入。 Text("$my_variable")@ramzieus
如何将小部件放入文本中？

*h1*>”我想在“*”之间替换文本字段

h1>”我想在“*”之间替换文本字段