混合 TextField 和 Text

Question

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

Answer 1

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

Column class for maintaining the items in the next line

Row class for continuing the items horizontally

代码如下：

请注意： 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]))
              ]
            ),
          ]
        )

这对您来说可能很长，但这将像结果一样满足您的目的。

Answer 2

我通过使用 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
                        ),),
                      ],
                    )
                )

混合 TextField 和 Text

mixing TextField and Text

widget

textfield

flutter

flutter-layout