Flutter textField字体填满后消失
Flutter textField字体填满后消失
提问于 2021-08-12 22:20:40
我使用的是简单的TextFormField，但问题是当我输入一些内容时，它会显示出来，但是TextField中的空格字体消失了。
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
child: Material(
shape: Border(
left: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
bottom: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
top: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
),
child: Container(
width: Width * 0.56,
height: Height * 0.07,
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
),
child: Center(
child: Text(
'https://www.app.stalkme.co/',
style: TextStyle(
color: textGreyColor, fontSize: 15, fontFamily: 'SegoeUI'),
)),
),
),
),
Container(
width: Width * 0.34,
height: Height * 0.07,
child: TextFormField(
controller: nfcUrl,
key: ValueKey('name'),
style: TextStyle(color: textGreyColor, fontFamily:'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: textGreyColor, fontSize: 15, fontFamily: 'SegoeUI'),
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
),
),
),
),
],
),这只发生在安卓设备上，奇怪的是，它没有在我的ios模拟器中造成任何问题，但当我在安卓设备上进行构建或测试时，我的字体在TextFormField填充后消失，没有空间
回答 2
Stack Overflow用户
发布于 2021-08-13 07:01:08
为了让TextField的文本正常显示，它需要正常的高度，但是如果你给它的高度低于它显示文本所需的高度，这种情况就会发生(如果设置为height: Height * 0.09或更高，你的问题就解决了)。
要减小TextField的高度，可以更改属性contentPadding或将isDense设置为true
TextFormField(
decoration: InputDecoration(
isDense: true,
//contentPadding: EdgeInsets.all(0), //or any padding
) ...Stack Overflow用户
发布于 2021-08-13 03:15:06
通过用Expanded包装第二个Container来测试你的文章中的代码。从我的角度看似乎没问题。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SafeArea(
child: Container(
width: size.width,
height: size.height,
child: SingleChildScrollView(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
child: Material(
shape: Border(
left: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
bottom: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
top: BorderSide(
width: 1,
color: Color(0xffE6E6E6),
),
),
child: Container(
width: Width * 0.56,
height: Height * 0.07,
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(5),
bottomLeft: Radius.circular(5)),
),
child: Center(
child: Text(
'https://www.app.stalkme.co/',
style: TextStyle(
color: Colors.grey, fontSize: 15, fontFamily: 'SegoeUI'),
)),
),
),
),
Expanded(
child:Container(
width: Width * 0.34,
height: Height * 0.07,
child: TextFormField(
controller: nfcUrl,
key: ValueKey('name'),
style: TextStyle(color: Colors.grey, fontFamily:'SegoeUI'),
decoration: new InputDecoration(
enabledBorder: new OutlineInputBorder(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
),
filled: true,
hintStyle: new TextStyle(
color: Colors.grey, fontSize: 15, fontFamily: 'SegoeUI'),
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xffE6E6E6), width: 1),
borderRadius: const BorderRadius.only(
topRight: Radius.circular(5),
bottomRight: Radius.circular(5)),
),
),
),
),
),
],
),
],
),
),
),
),
);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68764759
复制相关文章
相似问题
腾讯云开发者
