距离上次探索TextField已经过去了12天,那么现在看看这将近两周时间中,我又探索到了什么呢?
首先就是TextField的焦点,可以使用于点击前和点击后的变化
还有一个指定焦点,可以在你跳转到这个页面后,自动锁定文本输入框:
首先是获取TextField焦点后的样式转换:
先看点击前(未获取焦点前的)效果:
然后是点击后(获取焦点后)的效果:
然后上代码:
class MyApp1 extends StatefulWidget {
const MyApp1({Key? key}) : super(key: key);
@override
State<MyApp1> createState() => _MyApp1State();
}
FocusNode focusNode = FocusNode();
var bool1 = true;
class _MyApp1State extends State<MyApp1> {
@override
void initState() {
focusNode.addListener(() {
if (focusNode.hasFocus) {
//我们设置他获得焦点的时候将bool1取反
setState(() {
bool1 = !bool1;
});
// print(bool1);
print("获取焦点");
} else {
setState(() {
bool1 = !bool1;
});
print("失去焦点");
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: size.height,
color: Colors.green,
child: Stack(
children: [
Positioned(
top: size.height * 0.4,
left: size.width * 0.2,
child: Container(
width: size.width * 0.6,
height: 70,
color:
bool1 ? Colors.white.withOpacity(.5) : Colors.transparent,
//这里三元表达式,如果bool1是true那么就是白色,否则就是透明色
child: TextField(
focusNode: focusNode, //获取焦点数据
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide.none), //点击前颜色
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)), //点击后颜色
labelText: "Email",
labelStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 33)),
),
),
),
],
));
}
}
然后是获得焦点使用autofocus:ture,会自动获取焦点
class MyApp1 extends StatefulWidget {
const MyApp1({Key? key}) : super(key: key);
@override
State<MyApp1> createState() => _MyApp1State();
}
FocusNode focusNode = FocusNode();
var bool1 = true;
class _MyApp1State extends State<MyApp1> {
@override
void initState() {
focusNode.addListener(() {
if (focusNode.hasFocus) {
//我们设置他获得焦点的时候将bool1取反
setState(() {
bool1 = !bool1;
});
// print(bool1);
print("获取焦点");
} else {
setState(() {
bool1 = !bool1;
});
print("失去焦点");
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
width: size.width,
height: size.height,
color: Colors.green,
child: Stack(
children: [
Positioned(
top: size.height * 0.4,
left: size.width * 0.2,
child: Container(
width: size.width * 0.6,
height: 70,
color:
bool1 ? Colors.white.withOpacity(.5) : Colors.transparent,
//这里三元表达式,如果bool1是true那么就是白色,否则就是透明色
child: TextField(
autofocus: true,
focusNode: focusNode, //获取焦点数据
decoration: InputDecoration(
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide.none), //点击前颜色
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white)), //点击后颜色
labelText: "Email",
labelStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 33)),
),
),
),
],
));
}
}