在 TextField Flutter 中垂直居中对齐文本
问题描述 投票：0回答：11
我尝试查找大量资源，但不幸的是我找不到一种方法来将文本在文本字段中垂直居中对齐。我也尝试使用 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("•"),
],
),
),
],
),
);
}
}
导致此问题的可能是什么？我该如何解决这个问题？
11个回答
43
投票
投票
TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "Centered Hint",
),
)
希望这会有所帮助。
35
投票
投票
我有单行文本字段的解决方案。将 TextField 放置在具有 height 属性的容器内（在我的例子中，还有宽度），然后在装饰内部给出一个 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
),
),
),
12
投票
投票
试试这个：
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',
),
),
)
8
投票
投票
请尝试按Column换行并添加带有'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
投票
投票
最简单的方法是使用内置的
TextAlignTextField(
textAlign: TextAlign.center, // Align horizontally
textAlignVertical: TextAlignVertical.center, // Align vertically
)
5
投票
投票
像这样放置 contentPadding 和 isDense。
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
isDense: true,
hintText: 'Name',)
3
投票
投票
如果有什么不起作用，请尝试使用：
textAlignVertical: TextAlignVertical.bottom,
1
投票
投票
您可以在 Textfield/ Textformfield 中使用 textAlignVertical 属性。
演示：
TextField( textAlignVertical: TextAlignVertical.center, decoration: InputDecoration( hintText: 'Text aligned vertically centered', ) )0
投票
投票
日期时间选择完美，但提示对齐和日期值未在同一位置对齐。
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;
}
},
),
),
),
],
),
),
),`]
0
投票
投票
TextField(
controller: controller,
onSubmitted: (searchInfo) async {},
textAlignVertical: TextAlignVertical.center,
textAlign: TextAlign.left,
textInputAction: TextInputAction.go,
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
isDense: true,
hintText: hint,
hintStyle: TextStyle(
color: Colors.black.withOpacity(.35),
fontSize: 15.0,
),
prefixIcon: Padding(
padding: const EdgeInsets.all(6),
child: Image.asset(
ImageConstant.searchbox,
color: Colors.black.withOpacity(.7),
),
),
focusedBorder: InputBorder.none,
border: InputBorder.none,
),
),
0
投票
投票
在 InputDecoration 下放置 isDense: true，这对我的情况有效。
Container(
width: TrueSize.getWidth(context: context, width: 300),
height: TrueSize.getHeight(context: context, height: 66),
padding: const EdgeInsets.only(left: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
TrueSize.getHeight(context: context, height: 45)),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xfff4f4f4), Color(0xffb5b6b4)],
),
),
child: TextField(
controller: searchController,
textAlign: TextAlign.left,
textAlignVertical: TextAlignVertical.center,
maxLines: 1,
decoration: InputDecoration(
filled: true,
fillColor: Colors.transparent,
hintText: 'Search',
isDense: true,
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
contentPadding: EdgeInsets.zero,
suffixIcon: Icon(Icons.search, color: Colors.grey),
suffixIconConstraints:
BoxConstraints(minWidth: 40, minHeight: 40),
),
keyboardType: TextInputType.text,
keyboardAppearance: Brightness.light,
style: const TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w600),
cursorColor: ColorConstants.primaryBlue,
onChanged: (value) {
// Handle text field changes here
},
),
)
```
最新问题
- 为什么我的视图没有显示我希望代码显示的“shrek”的实际值
- Socket.connect 在 Android 中不会抛出异常
- 无法升级到java 17和使用Spring 6的springboot 3.2.5
- 根据坐标定位元素
- 将牛场结构转换为拥有结构的便捷方法
- System.Net 套接字非常奇怪的自发断开连接
- 是否有必要在SSR模式下使用Nuxt Server作为我的外部Django API和Nuxt 3前端之间的中介？
- 动态添加图像 next js 14
- 使用冒泡排序算法进行向量排序
- 我希望 MsgBox 显示“msoPictureAutomatic”而不是“1”
- 在唯一指针 C++ 中初始化 int 时出错
- 访问 Doctrine 夹具加载中的命令输出接口
- 如何为单个 NavigationView MenuItem 图标着色？
- discord.py-PermissionOverwrite，来自 Digiwind 的视频
- SaveChanges 获取旧值后读取实体框架
- Perl - 连接到 PostgreSQL 数据库 - 未能找到正确的套接字
- Angular 项目的路由无法正常工作
- 类似getchar的功能
- Android：离线时连接到服务器
- Android 上的 .connect() 程序崩溃，无法连接
© www.soinside.com 2019 - 2024. All rights reserved.