Question

对于一个新手问题，我感到抱歉，但我完全无法理解以下内容的工作原理。

我想做的-我想创建一个自定义小部件，例如CustomPopUp，然后在单击按钮时打开此PopUp小部件。

问题是什么-当我为该PopUp小部件指定大小参数和约束条件并尝试Navigator.push或使用showDialog对其进行调用时，它将占用整个屏幕，而忽略大小和{{1 }}参数（在第一种情况下）。

请在下面找到一个示例（为简单起见，该示例仅使用opaque: false选项）：

showDialog

结果：Screenshot

那么，我做错了什么？

谢谢！

Answer 1

用一个不可见的对话框包装您的自定义弹出窗口：

      body: Center(
          child: FlatButton(
            child: Text("PushMe"),
            onPressed: () {
              showDialog(
                  context: context,
                  builder: (_) => Dialog(child: CustomPopUp(), backgroundColor: Colors.transparent,)
              );
            },
          )
      ),

现在您甚至不需要BoxConstraints。

一些提示：

使用ConstrainedBox小部件而不是Container进行约束
使用SizedBox代替Container来设置高度和宽度。

Container将尝试默认匹配其父母的尺寸。

Answer 2

import 'package:flutter/material.dart';
/*
Develop by BBesttech  (pvnakum) 17 sep 2019
*/

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: FlatButton(
            child: Text("PushMe"),
            onPressed: () {
              showDialog(
                context: context,
                  builder:(_) =>
//                  AlertDialog(context),
                      _buildAboutDialog(context),
              );
            },

          )
      ),
    );
  }
}
// Alert dialog content widget
Widget _buildAboutDialog (BuildContext context){
  return new AlertDialog(
    title: Text('Titel Name'),
    content: new Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        _buildAboutText(),
      ],
    ),
    actions: <Widget>[
      new FlatButton(onPressed: (){
        Navigator.of(context).pop();
      }, child: Text('OK !'))
    ],


  );
}
Widget _buildAboutText(){
  return new RichText(
      text: new TextSpan(
        text: "Please Type your decription here",
        style: TextStyle(color: Colors.blue)
      ),
  );

}

小部件采用设置大小参数的全屏显示

2 个答案: