我有一个文本字段和一个独立的按钮,我想在文本字段聚焦时改变按钮的颜色。
天真地,我想写:: FlatButton(..., backgroundColor: myFocusNode.hasFocus ? Colors.red : Colors.green)
. 当然,这样做是行不通的,因为Button不会得到焦点变化的通知。或者,我试着在按钮上添加一个 Listener
到 myFocusNode
但如果我尝试调用 setState
内,以便重建按钮,文本字段又失去了焦点。
我修改了各自的示例代码 烹饪书 为了说明这一点,你可以复制下面的代码,然后粘贴并运行,看看我的意思。如何让按钮在点击文本字段时变成红色?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Field Focus',
home: MyCustomForm(),
);
}
}
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}
// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
// Define the focus node. To manage the lifecycle, create the FocusNode in
// the initState method, and clean it up in the dispose method.
FocusNode myFocusNode;
@override
void initState() {
super.initState();
myFocusNode = FocusNode();
}
@override
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Text Field Focus'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
// The first text field is focused on as soon as the app starts.
TextField(
autofocus: true,
),
// The second text field is focused on when a user taps the
// FloatingActionButton.
TextField(
focusNode: myFocusNode,
),
],
),
),
floatingActionButton: FloatingActionButton(
// When the button is pressed,
// give focus to the text field using myFocusNode.
onPressed: () => myFocusNode.requestFocus(),
tooltip: 'Focus Second Text Field',
backgroundColor: myFocusNode.hasFocus ? Colors.red : Colors.green,
child: Icon(Icons.edit),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
请检查下面的代码,我已经使用了下面的代码 Focus
小部件,它有 onFocusChange
这将表明 TextField
是否被选中
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutterlearningapp/colors.dart';
class HomeScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
bool isTextFiledFocus = false;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Demo",
home: Scaffold(
appBar: AppBar(
title: Text("List"),
),
body: Container(
margin: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Focus(
child: TextFormField(
textInputAction: TextInputAction.next,
decoration: InputDecoration(labelText: "Input 1"),
),
onFocusChange: (hasFocus) {
setState(() {
isTextFiledFocus = hasFocus;
});
},
),
TextFormField(
textInputAction: TextInputAction.next,
decoration: InputDecoration(labelText: "Input 1"),
),
RaisedButton(
color: isTextFiledFocus ? Colors.pink : Colors.blue,
child: Text("Ok"),
onPressed: () {
print("I am clicked");
},
)
],
),
),
),
);
}
}
myFocusNode.requestFocus();
在setState里面?是的,它为我工作
myFocusNode = FocusNode();
myFocusNode.addListener(() {
setState(() {
if(myFocusNode.hasFocus) {
myFocusNode.requestFocus();
}
});
});
Ps2.@Ravindra Kushwaha @Ravindra Kushwaha的答案更好:)