时间戳

首页 > 解决方案 > 如何从单独的类中调用颤振对话框？

flutter - 如何从单独的类中调用颤振对话框？

问题描述

我需要将我的对话框分开，以便在单击某个按钮时将小部件与任何地方的调用分开。现在我的代码看起来像：

import 'package:flutter/material.dart';

class PlacesListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _Map();
  }
}

class _Map extends StatefulWidget {
  @override
  _MapState createState() => _MapState();
}

class _MapState extends State<_Map> {

  final _titleController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App name'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              return showDialog(
                context: context,
                builder: (ctx) => AlertDialog(
                  title: Text(
                    "Dialog title",
                    textAlign: TextAlign.center,
                  ),
                  content: TextField(
                    decoration: InputDecoration(labelText: 'Title'),
                    controller: _titleController,
                  ),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.of(ctx).pop();
                      },
                      child: Text("No"),
                    ),
                    FlatButton(
                      onPressed: () {
                        return showDialog(
                          context: context,
                          builder: (ctx) => StatefulBuilder(builder:
                              (BuildContext context, StateSetter setState) {
                            return AlertDialog(
                              title: Text(
                                "Second subdialog title",
                                textAlign: TextAlign.center,
                              ),
                              content: Container(
                                width: 150,
                                height: 200,
                                decoration: BoxDecoration(
                                  border:
                                      Border.all(width: 1, color: Colors.grey),
                                ),
                                child: Text('Here will be file'),
                                alignment: Alignment.center,
                              ),
                              actions: <Widget>[
                                FlatButton(
                                  onPressed: () {
                                    Navigator.of(ctx).pop();
                                  },
                                  child: Text("No"),
                                ),
                                FlatButton(
                                  onPressed: () => Text('Here I will work with state'),
                                  child: Text("Yes"),
                                ),
                              ],
                            );
                          }),
                        );
                      },
                      child: Text("Yes"),
                    ),
                  ],
                ),
              );
            },
          ),
        ],
      ),
      body: Text('App body here'),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => Text('Here will be called dialog function'),
            child: Icon(Icons.add, color: Colors.white),
            backgroundColor: Colors.green,
            heroTag: 'mapZoomIn',
          ),
        ],
      ),
    );
  }
}

现在我如何将这部分代码（调用对话框）与另一个小部件分开，然后使用创建的小部件进行调用。

showDialog(
  context: context,
  builder: (ctx) => StatefulBuilder(builder:
      (BuildContext context, StateSetter setState) {
    return AlertDialog(
      title: Text(
        "Second subdialog title",
        textAlign: TextAlign.center,
      ),
      content: Container(
        width: 150,
        height: 200,
        decoration: BoxDecoration(
          border:
              Border.all(width: 1, color: Colors.grey),
        ),
        child: Text('Here will be file'),
        alignment: Alignment.center,
      ),
      actions: <Widget>[
        FlatButton(
          onPressed: () {
            Navigator.of(ctx).pop();
          },
          child: Text("No"),
        ),
        FlatButton(
          onPressed: () => Text('Here I will work with state'),
          child: Text("Yes"),
        ),
      ],
    );
  }),
);

标签： flutterdart

解决方案

首先，您可以将您重构 StatefulBuilder(builder: (BuildContext context, StateSetter setState) { return AlertDialog(...为一个单独的小部件，例如MyFancyDialog extends StatefulWidget. 然后showDialog(..., MyFancyWidget())在你需要的时候打电话。

其次，如果您不想要第一种方法，您可以将整体提取showDialog(...)到一个函数中，例如void showMyFancyDialog() { showDialog... }. 是否也可以，因为飞镖功能是一流的。

推荐阅读