Flutter 创建混合 TextWidget 和 TextFieldWidget

发布于07月05日

我正在努力为用户创造一种身临其境的体验，他必须完成一个句子.

我面临的困难部分是如何使其"响应"，以便输入文本完成当前行，并在超过当前行的情况下添加新的整行.

以下是Textfield为空时的图像示例:

以下是给它写信的一个例子:

对于如何构建这样的文本字段，您有什么建议吗？

推荐答案

go 掉textField的边框并在输入文本样式中添加下划线如何？

TextField(
        style: TextStyle(
    fontSize: 15,
    decoration: TextDecoration.underline,
  ),  decoration: InputDecoration(
          border: InputBorder.none,
          
        ),
      ),

像这样的事情

Edit 2:个

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.black,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Center(child: MyWidget()),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String filtext = "    ";
  TextEditingController myController = TextEditingController();
  FocusNode myFocusNode = FocusNode();
  @override
  void dispose() {
    myController.dispose();
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          constraints: BoxConstraints(maxWidth: 0, maxHeight: 0),
          child: IntrinsicWidth(
            child: TextField(
              focusNode: myFocusNode,
              controller: myController,
              onChanged: (value) {
                filtext = value;
                if (value.length <= 0) {
                  filtext = "    ";
                }
                setState(() {});
              },
              style: TextStyle(
                decoration: TextDecoration.underline,
              ),
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.zero, border: InputBorder.none),
            ),
          ),
        ),
        Container(
            width: MediaQuery.of(context).size.width,
            child: InkWell(
              onTap: () {
                setState(() {});
                FocusScope.of(context).requestFocus(myFocusNode);
                myFocusNode = FocusNode();
                setState(() {});
              },
              child: RichText(
                text: TextSpan(
                  style: DefaultTextStyle.of(context).style,
                  children: <TextSpan>[
                    TextSpan(text: ' I am '),
                    TextSpan(
                        text: " $filtext ",
                        style: TextStyle(
                          decoration: TextDecoration.underline,
                        )),
                    TextSpan(text: ' Thank you for coming'),
                  ],
                ),
              ),
            )),
      ],
    );
  }
}