flutter - Flutter:更改 TextField 焦点上的按钮颜色
问题描述
我有一个文本字段和一个单独的按钮,我想在文本字段聚焦时更改按钮的颜色。
天真地,我想写:FlatButton(..., backgroundColor: myFocusNode.hasFocus ? Colors.red : Colors.green)
。当然,这不起作用,因为 Button 不会收到有关焦点更改的通知。或者,我尝试添加一个Listener
to 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");
},
)
],
),
),
),
);
}
}
推荐阅读
- yeoman - 无法构建我的第一个 Hello Word SPFX。“yo @microsoft/sharepoint”正在返回“TypeError:lookups.flatMap 不是函数”
- scheme - 在 Scheme 中返回有状态函数的修改版本
- api - Twitter API get webhooks for my account [PHP]
- jquery - 如何在跨度中包装按钮的文本/值?
- r - 在 R 的 vrtest 包中使用 Lo.Mac 函数时出现 UseMethod("filter") 错误
- typescript - 在 vue 中访问从 axios 获取请求中创建的计算值
- mongodb - 在 k8s 中连接 mongo-express 到 mongoDb 失败
- flutter - 如果 firebase 没有要显示的数据,则不会在 firebase 动画列表小部件中执行构建方法
- python - 使用 plotly 在分组条形图中根据 RGB 值更改颜色
- java - 对 JAX-RS 服务的 GET 查询没有响应