flutter - 聚焦时对齐TextField的labelText
问题描述
labelText 属性 https://api.flutter.dev/flutter/material/InputDecoration/labelText.html 当文本字段被聚焦并且你有这样的 Inputdecoration 时向上移动:
InputDecoration(
labelText: labelText,
filled: true,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: ImpexColors.grey,
width: 1.0,
),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: ImpexColors.secondaryColor,
width: 2.0,
),
),
labelStyle: TextStyle(
color: ImpexColors.blue,
),
)
然后在上边框的中间对齐。当 TextField 聚焦时,是否有可能改变 labelText 的位置?
解决方案
有可能吗,基达?
FocusNode myFocusNode = FocusNode();
...
TextFormField(
focusNode: myFocusNode,
decoration: InputDecoration(
labelStyle: TextStyle(
height: myFocusNode.hasFocus ? 0.1 : 1, // 0,1 - label will sit on top of border
),
labelText: labelText,
...
));
还必须添加:
onTap: () => setState(() {FocusScope.of(context).requestFocus(myFocusNode);})
推荐阅读
- xamarin.forms - 带有按钮的自定义 TabbedPage
- javascript - 如何在 JS 中删除属性并映射新对象?
- jquery - When using jQuery's ".nextAll()", how would i make "$(this)" equal the current element?
- python - 如何在python中编写json时修复重复值
- python - 如何将从 re.finditer 返回的 ablosution 位置转换为 tkinter 文本小部件所需的 row.column?
- javascript - How to unit test function in React App with JEST
- vue.js - 将未转义的 HTML 传递到 vue 插槽字符串
- .net - .NET framework 4.0 install fails
- node.js - Share JavaScript files among different servers
- python - How to replace zeros in Pandas Data Frame by negative 1