0

我创建了一个文本和图标按钮，按下该图标模式底部工作表会生成，并且我创建了一个单独的 dart 文件，其中包含文本字段和一个提交按钮，当在文本字段上输入时并单击提交按钮后给定输入字符串将打印在 atlast 我在第一个 dart 文件中调用该函数但我希望将文本打印在主脚手架页面上。下面是主要代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:practice1/StatefulModalbtn.dart';

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

class Modalbtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Modal Bottom Test'),
        ),
        body: Column(
          children: <Widget>[Mymodal()],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            'Press the icon to select the Tractor model',
            style: TextStyle(fontSize: 15),
          ),
          IconButton(
            onPressed: () {
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return Container(
                      height: 200,
                      child: Column(
                        children: <Widget>[StatefulModalbtn()],
                      ),
                    );
                  });
            },
            icon: Icon(Icons.add),
            iconSize: 20,
          )
        ],
      ),
    );
  }
}

下面的代码用于创建文本字段和提交按钮

import 'package:flutter/material.dart';

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

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

class _StatefulModalbtnState extends State<StatefulModalbtn> {
  TextEditingController textController = TextEditingController();
  String displayText = "";

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: textController,
          maxLines: null,
        ),
        ElevatedButton(
            onPressed: () {
              setState(() {
                displayText = textController.text;
              });
            },
            child: Text('Submit')),
        Text(
          displayText,
          style: TextStyle(fontSize: 20),
        ),
      ],
    );
  }
}

以下是输出链接

这是我实现的输出，但我希望在 + 添加图标屏幕之后将“Hello World”打印在顶部/主屏幕上

我应该如何解决这个问题？

4

1 回答 1

1

我只是稍微编辑了你的代码

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'main1.dart';

void main() {
  runApp(MaterialApp(
    home: Modalbtn(),
  ));
}

class Modalbtn extends StatefulWidget {
  @override
  _ModalbtnState createState() => _ModalbtnState();
}

class _ModalbtnState extends State<Modalbtn> {
  String value = "0";
  // Pass this method to the child page.
  void _update(String newValue) {
    setState(() => value = newValue);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            IconButton(
              onPressed: () {
                showModalBottomSheet(
                    context: context,
                    builder: (BuildContext context) {
                      return Container(
                        height: 200,
                        child: Column(
                          children: [StatefulModalbtn(update: _update)],
                        ),
                      );
                    });
              },
              icon: Icon(Icons.add),
              iconSize: 20,
            ),
            Text(
              value,
              style: TextStyle(fontSize: 40),
            ),
          ],
        ),
      ),
    );
  }
}

子类是

import 'package:flutter/material.dart';

class StatefulModalbtn extends StatelessWidget {
  final ValueChanged<String> update;
  StatefulModalbtn({required this.update});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => update("100"), // Passing value to the parent widget.

      child: Text('Update (in child)'),
    );
  }
}
于 2022-02-24T10:50:52.117 回答