时间戳

首页 > 解决方案 > Flutter - 如何在按钮单击时呈现小部件？

android - Flutter - 如何在按钮单击时呈现小部件？

问题描述

嗨，我是新来的颤振，我有一个问题。我创建了简单的应用程序以获得更好的解释。在我的main.dart 中，我调用Button1()，它位于button1.dart中。当我按下按钮时，它应该在button2.dart中调用Button2()。但是第二个按钮没有渲染。我该怎么做？以及如何更改button2.dart中的一些数据？例如更改按钮的文本。我将按钮的文本设置为某个变量，当我单击第一个按钮时如何传递它？

谢谢

我的 main.dart 代码

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My app"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Button1(),
          ],
        ),
      ),
    );
  }
}

我的 button1.dart 代码

import 'button2.dart';

class Button1 extends StatefulWidget {
  @override
  _Button1State createState() => _Button1State();
}

class _Button1State extends State<Button1> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("button1"),
            onPressed: () {
              setState(() {
                Button2();
              });
            },
          ),
        ],
      ),
    );
  }
}

这是我的 button2.dart 代码


class Button2 extends StatefulWidget {
  @override
  _Button2State createState() => _Button2State();
}

class _Button2State extends State<Button2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("Button2"),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

标签： androidflutterdartflutter-layout

解决方案

我假设您是编程新手，我试图在这里尽可能简单地解释这个概念..

让你有你的主要课程（父母）。它包含您的两个小部件/按钮（儿童）。要将数据从一个孩子传递给另一个孩子，您可以在父类中有一个变量并通过它共享您的数据。这是一个例子..

class Parent{
String sharedData = "";
bool isVisible = false;

  build(context){
    //...
      Child1((String newData){
        setState(() {
          sharedData = newData;
          isVisible = true;
        });
      }),
     if(isVisible) Child2(sharedData),
    }
}

这里 Child1 使用回调来更新数据。在 setState 内部，它正在更新 Parent 类变量并重建小部件树。这会更新 Child2 类数据。希望你明白了...

推荐阅读