Question

我有一个文本字段和一个单独的按钮，我想在文本字段聚焦时更改按钮的颜色。

天真的，我想写：FlatButton(..., backgroundColor: myFocusNode.hasFocus ? Colors.red : Colors.green)。当然，这不会起作用，因为Button不会收到有关焦点更改的通知。另外，我尝试在Listener上添加myFocusNode，但是如果我尝试在其中调用setState以重建按钮，则文本字段将再次失去焦点。

我修改了相应cookbook中的示例代码以进行说明，您可以复制下面的代码，然后粘贴并运行以了解我的意思。单击文本字段时如何使按钮变成红色？

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.
    );
  }
}

Answer 1

myFocusNode.requestFocus();位于setState内？附言是的，它对我有用

myFocusNode = FocusNode();
myFocusNode.addListener(() {
  setState(() {
    if(myFocusNode.hasFocus) {
      myFocusNode.requestFocus();
    }
  });
});

Ps2：@Ravindra Kushwaha的答案更好：）

Answer 2

请检查以下代码，我已使用 Focus 小部件，它具有 onFocusChange ，它指示{{ 1}}是否被选中

TextField

并检查其以下输出

Flutter：更改TextField焦点上的按钮颜色

2 个答案: