Flutter 用 RichText 填空

Question

我几乎完成了我的应用程序的填空实现，但不幸的是我一直运行布局问题。

然而，随着我不断解决问题，我几乎完成了它，这是到目前为止的代码：

                        RichText(
                            text: TextSpan(
                                text: "dummy",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 20,
                                    height: 1.5,
                                    fontWeight: FontWeight.bold),
                                children: <InlineSpan>[
                                  TextSpan(
                                      text:
                                          ' to  to  to  to gdfgdfgdf to  to  to  to  to  to  to  ',
                                      style: TextStyle(
                                          height: 1.0,
                                          color: Colors.grey,
                                          fontSize: 20,
                                          fontWeight: FontWeight.bold)),
                                  WidgetSpan(
                                    alignment: PlaceholderAlignment.middle,
                                    child: SecretWord("turtle"),
                                  ),
                                  TextSpan(
                                      text:
                                          ' to  to  to  to gdfgdfgdf to  to  to  to  to  to  to  ',
                                      style: TextStyle(
                                          height: 1.0,
                                          color: Colors.grey,
                                          fontSize: 20,
                                          fontWeight: FontWeight.bold)),
                            )

还有我的 SecretWord class:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

class SecretWord extends StatelessWidget {

    final String answer;
    int answerLength;
    String answerHint;
    double answerWidth;

    SecretWord(this.answer){
        this.answerLength = answer.length;
        this.answerHint = '.' * answerLength;
        this.answerWidth = this.answerLength * 15.0;
    }

    String value = "";

    @override
    Widget build(BuildContext context) {
        return Container(
            //alignment: Alignment.bottomCenter,
            width: answerWidth,
            height: null,

          //  margin: const EdgeInsets.only(right: 10, left: 10),
            child: TextFormField(
                maxLines: null,
                cursorColor: Colors.cyanAccent,
                cursorRadius: Radius.circular(12.0),
                cursorWidth: 2.0,
                style: TextStyle(
                    color: (value == answer) ? Colors.amberAccent : Colors.lightGreenAccent,
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                    letterSpacing: 3,
                  //  height: 0.5,
                ),
                //textAlign: TextAlign.left,
                autofocus: false,
                maxLength: answerLength,
                onChanged: (text) {
                    value = text;

                },

                decoration: new InputDecoration(

                    //labelText: 'Name *',
                    border: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    errorBorder: InputBorder.none,
                    disabledBorder: InputBorder.none,
                    counterText: '',
                    hintText: answerHint,
                    hintStyle: TextStyle(

                        color: Colors.lightGreenAccent,
                        fontWeight: FontWeight.bold,
                        letterSpacing: 4,
                       // height: 0.5,
                    ),
                )
            )
        );
    }
}

不幸的是，这会产生一些问题：SecretWord 的容器高度优于 TextSpan，我如何才能成功地使用 TextFormField 降低容器的高度以匹配 TextSpan 的高度？

请注意，第二行与第一行和第三行的 space 比我预期的要多，这是因为 SecretWord 被认为在垂直方向上占用了更多 space。我知道原因，但不知道如何解决。

Answer 1

你好，我想出了一个解决方案来减少 TextField/TextFormField 的内部填充，这看起来像你的问题。

为 TextField 的 InputDecoration 设置这些值应该删除垂直填充：

     TextFormField(
          decoration: InputDecoration(
          isDense: true,
          contentPadding: const EdgeInsets.symmetric(vertical: -5),
          counterText: '',
        ),
      )

isDense=true makes the input is part of dense form (i.e., uses less vertical /// space).

setting contentPadding: const EdgeInsets.symmetric(vertical: -5) will reduce the vertical padding

As you already did in your example counterText: '' will prevent the counter text being shown.

所以这是您的新 SecretWordClass，并进行了更改。我还移动了构建方法下的属性，因为无状态小部件是不可变的，它们的属性应该是最终的。

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

class SecretWord extends StatelessWidget {
  final String answer;

  SecretWord(this.answer);

  @override
  Widget build(BuildContext context) {
    String value = "";
    int answerLength = answer.length;
    String answerHint = '.' * answerLength;
    double answerWidth = answerLength * 15.0;
    return Container(
      width: answerWidth,
      height: null,
      child: TextFormField(
        maxLines: null,
        cursorColor: Colors.cyanAccent,
        cursorRadius: Radius.circular(12.0),
        cursorWidth: 2.0,
        style: TextStyle(
          color:
              (value == answer) ? Colors.amberAccent : Colors.lightGreenAccent,
          fontWeight: FontWeight.bold,
          fontSize: 20,
          letterSpacing: 3,
        ),
        autofocus: false,
        maxLength: answerLength,
        onChanged: (text) {
          value = text;
        },
        decoration: new InputDecoration(
          isDense: true,
          contentPadding: const EdgeInsets.symmetric(vertical: -5),
          counterText: '',
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          enabledBorder: InputBorder.none,
          errorBorder: InputBorder.none,
          disabledBorder: InputBorder.none,
          hintText: answerHint,
          hintStyle: TextStyle(
            color: Colors.lightGreenAccent,
            fontWeight: FontWeight.bold,
            letterSpacing: 4,
          ),
        ),
      ),
    );
  }
}

结果如下：

Flutter 用 RichText 填空

Flutter Fill in Blank with RichText

abstract-class

richtext

flutter