如何將 flutter textediting controller 值從一個無狀態小部件傳遞到另一個無狀態小部件

Question

這里是main.dart文件：

import 'package:flutter/material.dart';
import 'package:untitled/button.dart';
import 'package:untitled/form.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[MyForm(), MyButton()],
        ),
      ),
    );
  }
}

這是form.dart文件：

import 'package:flutter/material.dart';

class MyForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TextEditingController x = TextEditingController();
    return Container(
      child: Center(
        child: TextField(
          controller: x,
          decoration: InputDecoration(labelText: "Name"),
        ),
      ),
    );
  }
}

這是button.dart文件：

import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: ElevatedButton(
          onPressed: () {
            //if I press this button the textediting field will show 10
          },
          child: Text("Pass 10"),
        ),
      ),
    );
  }
}

1. 如果我按下 button.dart 中的按鈕，如何在文本編輯字段中顯示數據？
   
2. 做這些事情的最佳方法是什么？
   
3. 我應該在 statelesswidget 中使用 statefulwidgets 還是在 statefulwidgets 中使用 statelesswidgets？

我的想法是使用 redux 或提供者來傳遞這種東西。 雖然我不知道這個簡單的東西是否需要state管理系統。

Answer 1

您需要將 state 抬起（主要創建 controller 並將其傳遞給孩子）

// main.dart
class _MyHomePageState extends State<MyHomePage> {
  TextEditingController x = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[MyForm(x), MyButton(x)],
        ),
      ),
    );
  }
}

class MyForm extends StatelessWidget {
  MyForm(this.x);
  final TextEditingController x;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: TextField(
          controller: x,
          decoration: InputDecoration(labelText: "Name"),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  MyButton(this.x);
  final TextEditingController x;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: ElevatedButton(
          onPressed: () {
            x...
            //if I press this button the textediting field will show 10
          },
          child: Text("Pass 10"),
        ),
      ),
    );
  }
}

Answer 2

請參閱此處的 Flutter 說明： https://api.flutter.dev/flutter/widgets/StatelessWidget-class.https：