Flutter用RichText填充空白 [英] Flutter Fill in Blank with RichText
问题描述
我几乎已经完成了我应用程序的空白实现，但不幸的是，我一直遇到布局问题。
I am almost done with fill in blanks implementation for my app but unfortunately I keep running into layout issues.
但是，当我继续解决几乎要解决的问题时，到目前为止的代码是：
However as I keep solving the issues I am almost done with it, this is the code so far:
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课：
And my 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减小Container的高度以匹配TextSpan的高度？
Unfortunately this create some issues: the container height of SecretWord is superior to TextSpan, how could I succeed to reduce the height of the Container with TextFormField to match the height of TextSpan ?
请注意，第二行与第一行和第三行之间的空间比我期望的要多，这是因为SecretWord被认为在垂直方向上会占用更多的空间。我知道原因，但不知道如何解决。
Notice that the second line has more space with first and third line than what I was expecting, it is because SecretWord is considered to take more space vertically. I know the cause but not how to solve it.
推荐答案
你好，我想出了一种减少内部填充的解决方案
Hello I've come up with a solution to reduce the inner padding of TextField/TextFormField which looks like your problem.
为TextField的InputDecoration设置以下值应删除垂直填充：
Setting these values for the InputDecoration of the TextField should remove the vertical padding:
TextFormField(
decoration: InputDecoration(
isDense: true,
contentPadding: const EdgeInsets.symmetric(vertical: -5),
counterText: '',
),
)
isDense = true 使输入为密集形式的一部分（即，使用较少的垂直
///空间）。
isDense=true makes the input is part of dense form (i.e., uses less vertical /// space).
设置 contentPadding：const EdgeInsets.symmetric（vertical：-5）将减少垂直填充
示例 counterText：''将阻止计数器t ext正在显示。
As you already did in your example counterText: '' will prevent the counter text being shown.
这是新的SecretWordClass，其中包含更改。由于无状态窗口小部件是不可变的，所以它们也将属性移到了build方法之下。
So here is your new SecretWordClass with the changes. I also moved the properties under the build method since stateless widgets are immutable and their properties should be final.
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,
),
),
),
);
}
}
结果如下：
Here are the results:
这篇关于Flutter用RichText填充空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
