android - 从不同的类向应用程序发送值但需要单击（点击）两次按钮 - Flutter / Dart

Question

虽然将来自不同类的文本字段的值发送到 App Bar，但是需要单击（点击）两次按钮会发生什么，然后该值只能发送到目标对象（App Bar）。希望任何人都可以评论并给我建议，感谢您的建议。

点击结果如下：

1. 第一次点击的结果显示为空且无值。
2. 第二次点击的结果是要发送到目标对象的想要的和期望的值。

截图如下：

https://i.stack.imgur.com/2uUN3.png

https://i.stack.imgur.com/EiNvC.png

https://i.stack.imgur.com/soc7z.png

主要.dart

import 'package:flutter/material.dart';
import 'custombutton.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'App Value is '),
    );
  }
}



class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final _textfield = TextEditingController();
  String AppBarVar = 'UNKNOWN';

  _callback(varAppBar){
    setState(() {
      AppBarVar = varAppBar;
    });
  }

  @override
  void dispose() {

    _textfield.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title + AppBarVar),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Passing Value from TextField to App Bar',
            ),

            TextField(
              controller: _textfield,
              keyboardType: TextInputType.text,
              decoration: const InputDecoration(
                hintText: 'Enter Values pass to Appbar'
              ),
            ),

            CustomButton(AppBarVar: _textfield.text, callback: _callback)
          ],
        ),
      ),

    );
  }
}

自定义按钮.dart

import 'package:flutter/material.dart';

class CustomButton extends StatefulWidget {
  final String AppBarVar;
  final Function callback;

  const CustomButton({Key? key, required this.AppBarVar, required this.callback}) : super(key: key);

  @override
  State<CustomButton> createState() => _CustomButtonState();
}

class _CustomButtonState extends State<CustomButton> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: (){
        setState(() {
          widget.callback(widget.AppBarVar);
        });
      },
      child: Text('Send to AppBar'),
    );
  }
}

标签： androidiosflutterdart

Answer 1

您需要对代码进行以下更改

将回调传递给 onPressed 并在以下同一屏幕上调用 setState

import 'package:custom/second.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'App Value is '),
    );
  }
}



class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final _textfield = TextEditingController();
  String AppBarVar = 'UNKNOWN';

  _callback(varAppBar){
    setState(() {
      AppBarVar = varAppBar;
    });
  }

  @override
  void dispose() {

    _textfield.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title + AppBarVar),
      ),
      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Passing Value from TextField to App Bar',
            ),

            TextField(
              controller: _textfield,
              keyboardType: TextInputType.text,
              decoration: const InputDecoration(
                  hintText: 'Enter Values pass to Appbar'
              ),
            ),

            CustomButton(AppBarVar: _textfield.text, callback: (){
              setState(() {
                AppBarVar = _textfield.text;
              });
            })
          ],
        ),
      ),

    );
  }
}

和其他文件

import 'package:flutter/material.dart';

class CustomButton extends StatefulWidget {
  final String AppBarVar;
  final Function() callback;

  const CustomButton({Key? key, required this.AppBarVar, required this.callback}) : super(key: key);

  @override
  State<CustomButton> createState() => _CustomButtonState();
}

class _CustomButtonState extends State<CustomButton> {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: widget.callback,
      child: Text('Send to AppBar'),
    );
  }
}

更新，将此用作您的回调

_callback(){
    setState(() {
      AppBarVar = _textfield.text;
    });
  }

并把它传到这里

CustomButton(AppBarVar: _textfield.text, callback: _callback)