flutter - Flutter TextField LabelText 中心
问题描述
期望的效果是让 Kartennummer 和 Passwort 集中。
这怎么可能?
我为此使用了一个自定义类:
import 'package:flutter/material.dart';
import 'package:impex_shop/styles/impex_styles.dart';
class ImpexTextField extends StatefulWidget {
final TextEditingController controller;
final bool obscureText;
final TextInputType keyboardType;
final String labelText;
final IconData prefixIcon;
final int maxLines;
final TextInputAction textInputAction;
final void Function(String) onSubmitted;
final bool autofocus;
const ImpexTextField(
{Key key,
this.controller,
this.obscureText,
this.keyboardType,
this.labelText,
this.prefixIcon,
this.maxLines = 1,
this.textInputAction,
this.onSubmitted,
this.autofocus = false})
: super(key: key);
@override
_ImpexTextFieldState createState() => _ImpexTextFieldState();
}
class _ImpexTextFieldState extends State<ImpexTextField> {
FocusNode _focusNode = FocusNode();
Paint paint;
InputDecoration buildTextInputDecoration(
String labelText, TextEditingController controller, IconData prefixIcon) {
return InputDecoration(
labelText: labelText,
labelStyle: TextStyle(
color: ImpexColors.mainColor,
height: 0.8, // 0,1 - label will sit on top of border
background: paint,
),
fillColor: ImpexColors.lightGrey,
filled: true,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: ImpexColors.grey,
width: 1.0,
),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: ImpexColors.secondaryColor,
width: 2.0,
),
),
suffixIcon: InkWell(
onTap: () => controller.clear(),
child: Icon(Icons.cancel),
),
prefixIcon: prefixIcon == null ? null : Icon(prefixIcon),
);
}
@override
Widget build(BuildContext context) {
return Container(
child: ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: <Widget>[
Container(
height: 12,
),
TextField(
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.center,
focusNode: _focusNode,
controller: widget.controller,
obscureText: widget.obscureText ?? false,
maxLines: widget.maxLines,
textInputAction: widget.textInputAction,
decoration: buildTextInputDecoration(
widget.labelText, widget.controller, widget.prefixIcon),
keyboardType: widget.keyboardType,
autofocus: widget.autofocus,
onSubmitted: widget.onSubmitted,
onTap: () => setState(() {
FocusScope.of(context).requestFocus(_focusNode);
}),
),
],
),
);
}
@override
void dispose() {
_focusNode.dispose();
super.dispose();
}
}
解决方案
这是一个不错的决定。
尝试使用alignLabelWithHint: true
.
例如:
TextField(keyboardType: TextInputType.number, textAlign: TextAlign.center, maxLines: 1, decoration: InputDecoration(alignLabelWithHint: true, enabledBorder: InputBorder.none, contentPadding: EdgeInsets.zero, focusedBorder: InputBorder.none, border: InputBorder.none, labelStyle: Theme.of(context).textTheme.headline6, labelText: 'Amount (GPB)'.toUpperCase(),),),
推荐阅读
- python - 尝试在 App Engine 上使用 pandas 时出现 hashlib 导入错误?
- algorithm - 第 k 个最大/最小元素是什么意思?
- node.js - 无法读取所有未定义的属性“地图”
- python - 查找所有强连通元素
- angularjs - 试图在 angularjs $http 中发布原始 html 数据,得到 $sce 信任错误
- scala - sbt 在组装后不包括清单中的主类
- php - 使用单个查询从相关数据库表中回显嵌套的 JSON 数组?
- angular - '符号'管道在角度上有什么作用?
- machine-learning - Azure ML Studio 中是否有任何模块可以识别与目标变量相关的特征和相关的输入特征?
- unix - 更新 fstab 后无法挂载目录