gpt4 book ai didi

Flutter 用 RichText 填充空白

转载 作者:行者123 更新时间:2023-12-04 09:56:37 29 4
gpt4 key购买 nike

我几乎完成了应用程序的填充空白实现,但不幸的是我一直遇到布局问题。

但是,随着我不断解决问题,我几乎已经完成了,这是到目前为止的代码:

                        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 降低 Container 的高度以匹配 TextSpan 的高度?

enter image description here

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

最佳答案

您好,我想出了一个解决方案来减少 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 的变化。我还移动了 build 方法下的属性,因为无状态小部件是不可变的,它们的属性应该是最终的。
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,
),
),
),
);
}
}

结果如下:
enter image description here

关于Flutter 用 RichText 填充空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61902559/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com