Flutter-自定义警报对话框未显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter-自定义警报对话框未显示相关的知识，希望对你有一定的参考价值。
我正在使用Flutter / Dart构建一个custom alert dialog，并从Github获得了一个Custom Show Dialog类，由于某种原因或其他原因，该对话框未显示。
Q：如何使对话框正确显示？
PS resultsDialog(a,b)在其他位置单击按钮时被调用。
这是我的“警报”对话框代码：
Future<void> resultsDialog(String sq, String sl) async {
BuildContext ctx;
CustomAlertDialog dialog = new CustomAlertDialog(
content: Material(
type: MaterialType.card,
child: new Container(
margin: EdgeInsets.only(left: 26.0, right: 26.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
new Expanded(
//...
),
// dialog center row
new Expanded(
//...
),
// dialog bottom row
new Expanded(
//...
),
],
),
),
),
);
customShowDialog(context: ctx, child: dialog);
}
预期结果：
PS我得到了内部行的照顾，所以这里的问题只是使对话框显示并防止其被关闭，就这样
答案
您需要从父窗口小部件传递上下文然后在resultsDialog中添加参数BuildContext ctx您可以在下面复制粘贴运行完整代码
代码段
void _incrementCounter() {
resultsDialog(context, "a", "b");
setState(() {
Future<void> resultsDialog(BuildContext ctx, String sq, String sl) async {
//BuildContext ctx;
CustomAlertDialog dialog = new CustomAlertDialog(
content: Material(
type: MaterialType.card,
child: new Container(
margin: EdgeInsets.only(left: 26.0, right: 26.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
Text('Dialog OK'),
Text('${sq}'),
Text('${sl}'),
],
),
),
),
);
customShowDialog(context: ctx, child: dialog);
}
工作演示
完整代码
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
resultsDialog(context, "a", "b");
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
Future<void> resultsDialog(BuildContext ctx, String sq, String sl) async {
//BuildContext ctx;
CustomAlertDialog dialog = new CustomAlertDialog(
content: Material(
type: MaterialType.card,
child: new Container(
margin: EdgeInsets.only(left: 26.0, right: 26.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: const Color(0xFFFFFF),
borderRadius:
new BorderRadius.all(new Radius.circular(32.0)),
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// dialog top
Text('Dialog OK'),
Text('${sq}'),
Text('${sl}'),
],
),
),
),
);
customShowDialog(context: ctx, child: dialog);
}
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Examples can assume:
// enum Department { treasury, state }
/// A material design dialog.
///
/// This dialog widget does not have any opinion about the contents of the
/// dialog. Rather than using this widget directly, consider using [AlertDialog]
/// or [SimpleDialog], which implement specific kinds of material design
/// dialogs.
///
/// See also:
///
/// * [AlertDialog], for dialogs that have a message and some buttons.
/// * [SimpleDialog], for dialogs that offer a variety of options.
/// * [showDialog], which actually displays the dialog and returns its result.
/// * <https://material.google.com/components/dialogs.html>
class Dialog extends StatelessWidget {
/// Creates a dialog.
///
/// Typically used in conjunction with [showDialog].
const Dialog({
Key key,
this.child,
this.insetAnimationDuration: const Duration(milliseconds: 100),
this.insetAnimationCurve: Curves.decelerate,
}) : super(key: key);
/// The widget below this widget in the tree.
///
/// {@macro flutter.widgets.child}
final Widget child;
/// The duration of the animation to show when the system ke以上是关于Flutter-自定义警报对话框未显示的主要内容，如果未能解决你的问题，请参考以下文章