flutter

Question

我是 flutter 的新手，有人可以帮助我吗？请

此代码使在 TextField() class 中写入的内容在按下 RawMaterialButton() 后，将其转换为 container() 中的文本 class。

当我按下另一个 RawMaterialButton() 时，代码 returns 从 container() class 到 textField() class.

我想回到textFieldclass，我想回到textFieldclass，之前写的文字写在TextField

我该怎么办？谢谢:)

import 'package:flutter/material.dart';

void main() => runApp(mainApp());

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: chat(),
    );
  }
}

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

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

class _chatState extends State<chat> {
  bool changeClass = false;
  String? text;
  changeClassValue(String? newText) {
    setState(() {
      changeClass = !changeClass;
      text = newText;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: changeClass
          ? container(
              text: text ?? "",
              changeClassValue: changeClassValue,
            )
          : textField(
              changeClassValue: changeClassValue,
            ),
    );
  }
}

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

  ValueChanged<String> changeClassValue;

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

class _textFieldState extends State<textField> {
  final textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.red,
            child: TextField(
              controller: textController,
            ),
          ),
          RawMaterialButton(
            onPressed: () {
              widget.changeClassValue(textController.text);
            },
            child: Icon(Icons.send),
          )
        ],
      ),
    );
  }
}

class container extends StatefulWidget {
  container({Key? key, required this.text, required this.changeClassValue})
      : super(key: key);

  String text;
  ValueChanged<String> changeClassValue;

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

class _containerState extends State<container> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.grey,
            child: Text(widget.text),
          ),
          RawMaterialButton(
            onPressed: () {
              widget.changeClassValue(widget.text);
            },
            child: Icon(Icons.edit),
          )
        ],
      ),
    );
  }
}

希望有人能帮助我。

.

Answer 1

在开始之前，请务必确保您的 class 名称以大写字母开头。 Container 和 TextField 等名称已在 Flutter 中定义，因此您可能需要为这些小部件使用不同的名称。

这两个小部件不必是 StatefulWidgets，但 StatelessWidgets 会更容易使用。然而，Chat 小部件应该是这里唯一具有状态的小部件。此小部件应具有 TextEditingController 状态并将其传递给 textField 以供使用。

container 应该从同一个 TextEditingController 中获取其 text 属性。

两个小部件还应该有一个回调函数，例如 VoidCallback 以在显示哪个小部件之间切换。

这是一个例子：

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

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

class _ChatState extends State<Chat> {
  bool changeClass = false;
  final textController = TextEditingController();

  toggleClass() {
    setState(() {
      changeClass = !changeClass;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: changeClass
          ? ChatContainer(
              text: textController.text,
              toggleClass: toggleClass,
            )
          : ChatTextField(
              textController: textController,
              toggleClass: toggleClass,
            ),
    );
  }
}

class ChatTextField extends StatelessWidget {
  final TextEditingController textController;
  final VoidCallback toggleClass;

  ChatTextField({
    Key? key,
    required this.textController,
    required this.toggleClass,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.red,
            child: TextField(
              controller: textController,
            ),
          ),
          RawMaterialButton(
            onPressed: toggleClass,
            child: Icon(Icons.send),
          )
        ],
      ),
    );
  }
}

class ChatContainer extends StatelessWidget {
  final String text;
  final VoidCallback toggleClass;

  ChatContainer({
    Key? key,
    required this.text,
    required this.toggleClass,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: [
          Container(
            width: 300.0,
            height: 60.0,
            color: Colors.grey,
            child: Text(text),
          ),
          RawMaterialButton(
            onPressed: toggleClass,
            child: Icon(Icons.edit),
          )
        ],
      ),
    );
  }
}

flutter - 从文本到 textField

flutter - from text to textField

class