在 TextField Flutter 中垂直居中对齐文本
Posted
技术标签:
【中文标题】在 TextField Flutter 中垂直居中对齐文本【英文标题】：Vertically Centre Align Text in TextField Flutter 【发布时间】：2019-11-17 09:31:21 【问题描述】：我尝试在大量资源中查找，但不幸的是我找不到将文本垂直居中对齐文本字段的方法。我也尝试使用 suffixIcon 而不是 suffix 但仍然不走运。这是我的代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
home: HomePage(),
);
class HomePage extends StatefulWidget
@override
State<StatefulWidget> createState()
return _HomePageState();
class _HomePageState extends State<HomePage>
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
leading: Icon(
Icons.menu,
color: Colors.black,
),
backgroundColor: Colors.white,
title: Container(
margin: EdgeInsets.only(bottom: 10),
child: Image.asset(
"icons/logo.png",
),
),
bottom: PreferredSize(
child: Padding(
padding: EdgeInsets.only(
left: 10,
right: 10,
bottom: 10,
),
child: Container(
height: 40,
child: TextField(
textAlignVertical: TextAlignVertical.center,
textAlign: TextAlign.left,
maxLines: 1,
style: TextStyle(
fontSize: 13,
),
decoration: InputDecoration(
suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: ()),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
)
),
),
),
),
preferredSize: Size(MediaQuery.of(context).size.width, 50),
),
),
body: Container(
margin: EdgeInsets.only(top: 11),
child: Column(
children: <Widget>[
Carousel(),
],
),
),
);
class Carousel extends StatefulWidget
@override
State<StatefulWidget> createState()
return _CarouselState();
class _CarouselState extends State<Carousel>
List<String> urls = [];
@override
Widget build(BuildContext context)
return Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Stack(
children: <Widget>[
Image.network(
"someImageUrlHere."),
Positioned(
bottom: 5,
width: MediaQuery.of(context).size.width - 20,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("•"),
Text("•"),
Text("•"),
Text("•"),
Text("•"),
],
),
),
],
),
);
可能是什么问题导致了这个问题？我该如何解决这个问题？
【问题讨论】：
你能添加一张你想要的图片吗？ @diegoveloper 图片在哪里？ 你的问题 【参考方案1】：我有单行文本字段的解决方案。将 TextField 放置在具有高度属性的 Container 中（在我的情况下，也是宽度），然后在装饰内赋予 contentPadding 值，其值为 height / 2。
代码如下：
Container(
height: textfieldDimension,
width: textfieldDimension,
alignment: Alignment.center,
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
bottom: textfieldDimension / 2, // HERE THE IMPORTANT PART
)
),
// textAlignVertical: TextAlignVertical.center, THIS DOES NOT WORK
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10, // This is not so important
),
),
),
【讨论】：
【参考方案2】：TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "Centered Hint",
),
)
希望这会有所帮助。
【讨论】：
其实这是正确答案，但没有投票 @MohamedYousof 不，这不会使 textAlign 垂直居中，只是水平居中。 @ArsenTatraev 为此，您必须使 text-align 属性居中。textAlign: TextAlign.center 将水平对齐文本。要垂直对齐，您需要使用textAlignVertical: TextAlignVertical.center 属性。【参考方案3】：
在 TextField 中对齐垂直居中的文本。您只需将TextField 的contentPadding 设置为EdgeInsets.zero。
这里是如何实现的
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
hintText: "password",
),
)
这是输出
【讨论】：
【参考方案4】：请尝试按列换行，并在“MainAxisAlignment.center”中添加“mainAxisAlignment”属性
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start, // If you want align text to left
children: <Widget>[
TextField(
textAlignVertical: TextAlignVertical.center,
textAlign: TextAlign.left,
maxLines: 1,
style: TextStyle(
fontSize: 13,
),
decoration: InputDecoration(
suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: ()),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
)
),
),
],
),
)
【讨论】：
【参考方案5】：试试这个：
Container(
height: 36,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 17),
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
filled: true,
prefixIcon:
Icon(Icons.search, color: Theme.of(context).iconTheme.color),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(30))),
fillColor: Theme.of(context).inputDecorationTheme.fillColor,
contentPadding: EdgeInsets.zero,
hintText: 'Search',
),
),
)
【讨论】：
【参考方案6】：日期时间选择完美，但提示对齐和日期值不在同一个地方对齐。
Container(
child: Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15.0, bottom: 10.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Center(
child: Image.asset(
"assets/images/date.png",
// width: 20,
width: SizeConfig.safeBlockHorizontal * 4,
),
),
SizedBox(
width: 15,
),
Flexible(
child: Center(
child: DateTimeField(
decoration: InputDecoration.collapsed(
hintText: "Start date and time",
hintStyle: TextStyle(
// fontSize: 14,
fontSize: SizeConfig.safeBlockHorizontal * 3,
),
border: InputBorder.none,
),
validator: validateStartDate,
onSaved: (DateTime val)
_startDate = val;
,
format: format,
style: TextStyle(
fontSize: SizeConfig.safeBlockHorizontal * 3,
),
onShowPicker: (context, currentValue) async
// FocusScope.of(context).previousFocus();
final Startdate = await showDatePicker(
context: context,
firstDate: DateTime.now()
.subtract(Duration(days: 1)),
initialDate: currentValue ?? DateTime.now(),
lastDate: DateTime(2100));
if (Startdate != null)
final StartTime = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(
currentValue ?? DateTime.now()),
);
setState(()
StartDate = DateTimeField.combine(
Startdate, StartTime);
);
return DateTimeField.combine(
Startdate, StartTime);
else
return currentValue;
,
),
),
),
],
),
),
),`]1
【讨论】：
以上是关于在 TextField Flutter 中垂直居中对齐文本的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Container 中垂直扩展 TextField 以覆盖 Flutter 中的所有可用空间
在 Flutter 中对齐多行 TextField 中的提示文本