Flutter Two TextFields -如何重用单个按钮在每个文本字段中输入数字

lf5gs5x2 于 2023-03-19 发布在 Flutter

关注(0)|答案(1)|浏览(119)

我有一个Flutter项目，其中有两个文本字段和一个用于输入值9的按钮，例如每个文本字段。
每个文本字段都有一个不同的控制器。
步骤：选择第一个文本字段，单击一个按钮，选择第二个文本字段，然后单击同一个按钮。
有两个问题：
1.如何为每个文本字段重用同一个按钮
1.如何判断选择了哪个文本字段
我写了下面的演示代码.请指教.谢谢
演示代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  TextEditingController mc = TextEditingController();
  TextEditingController mc2 = TextEditingController();

  clickButton(){
    //click button to insert 9 into each field when a field is selected
    //Please advice what code to add here
  }

  @override
  Widget build(BuildContext context) {
    Widget space = SizedBox(width: 100, height: 5, child: Text(""));
    Widget myinput = TextField(controller: mc,keyboardType: TextInputType.number ,decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Number'));
    Widget myinput2 = TextField(controller: mc2,keyboardType: TextInputType.number,decoration: InputDecoration(border: OutlineInputBorder(), labelText: 'Number'));
    Widget btn1 = ElevatedButton(onPressed: clickButton, child: Text('9'));

    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(5),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      space,
                      myinput,
                      space,
                      myinput2,
                      space,
                      btn1,
                      space
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/75778585/flutter-two-textfields-how-reuse-a-single-button-to-enter-a-number-into-each-t

1条答案

按热度按时间

c86crjj01#

在该状态下，可以创建两个FocusNode，即：

final focusNode1 = FocusNode();
final focusNode2 = FocusNode();

您可以将它们分配给每个TextField，即：

TextField(focusNode: focusNode1, ...)
TextField(focusNode: focusNode2, ...)

在clickButton方法中，可以使用hasFocus属性检查哪个FocusNode具有焦点。
下面是一个完整的工作示例：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Demo',
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  State<FirstPage> createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  final ctrl1 = TextEditingController();
  final ctrl2 = TextEditingController();
  final fn1 = FocusNode();
  final fn2 = FocusNode();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SO question 75778585'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextField(focusNode: fn1, controller: ctrl1),
            TextField(focusNode: fn2, controller: ctrl2),
            ElevatedButton(
              onPressed: () {
                if (fn1.hasFocus) {
                  ctrl1.text = "Set";
                }
                if (fn2.hasFocus) {
                  ctrl2.text = "Set";
                }
              },
              child: const Text('Set stuff'),
            ),
          ],
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-03-19

我来回答

Flutter Two TextFields -如何重用单个按钮在每个文本字段中输入数字

1条答案

相关问题

热门标签

最新问答