Question

我正在尝试在活动顶部创建一个透明的全屏对话框。我尝试遵循此thread，但解决方案无效。

简而言之，我需要的是：

全屏对话框。
透明背景，除了我用于对话框的小部件

这是我的代码：

打开对话框

void onNextBtnClick(){
    var route = new MaterialPageRoute(
        builder: (BuildContext context) =>
        new GenreDialogUI(),fullscreenDialog: true
    );
    Navigator.of(context).push(route);
}

用于对话框视图

import 'package:flutter/widgets.dart';

class HolePuncherPainter extends CustomPainter {
  static final clearPaint = new Paint()
    ..color = Colors.transparent,
    ..blendMode = BlendMode.clear;

  const HolePuncherPainter();

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
        new Rect.fromLTWH(0.0, 0.0, size.width, size.height), clearPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class GenreDialogUI extends StatefulWidget {
   @override
   _GenreDialogUI createState() => new _GenreDialogUI();
}

class _GenreDialogUI extends State<GenreDialogUI>  {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: addAppbar(),
      body: new CustomPaint(
        painter: HolePuncherPainter(),
        child: new Container(
        color: Colors.transparent,
        alignment: Alignment.center,
        child: UtilCommonWidget.addText('Transparent Dialog', Colors.red, 22.0, 1),
        ),
      ),
    );
  }
}

Answer 1

SCRIPT_DIR = Path(sys.executable).parent

def getDataFromPdf():
pdf_file = SCRIPT_DIR / 'records.pdf'
print(pdf_file.resolve())
with open(pdf_file.resolve(),'rb') as records:
    acctNumberRegex = re.compile(r'\d\d\d\d\d-\d\d\d-\d\d\d\d')
    reader = PyPDF2.PdfFileReader(records)
    for pageNum in range(0,reader.numPages):
        page = reader.getPage(pageNum).extractText()
        accounts = acctNumberRegex.findall(page)
        for acct in accounts:
            if acct not in results:
                results.append(acct)
    print(str(len(results)) + " account numbers pulled from PDF")

YourFullScreenAlertDialog可能是具有背景颜色Colors.transparent的小部件，例如前面可能未提到的@creativecreatoror。

Answer 2

对我来说，以下工作有效：

    showDialog(
  context: context,
    builder: (_) => Material(
      type: MaterialType.transparency,

      child: Center( // Aligns the container to center
          child: Container( // A simplified version of dialog.
            width: 100.0,
            height: 56.0,
            color: Colors.green,
            child: Text('jojo'),
          )
      ),
    )
);

Answer 3

in有一个backgroundColor property。您还需要使该透明：

Scaffold

Answer 4

屏幕截图 (showGeneralDialog)：

代码：

Widget build(BuildContext context) {
  return Scaffold(
    body: SizedBox.expand(child: FlutterLogo()),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.open_in_new),
      onPressed: () {
        showGeneralDialog(
          context: context,
          barrierColor: Colors.black54,
          pageBuilder: (_, __, ___) => Container(child: Material(child: Text('Dialog'))),
        );
      },
    ),
  );
}

Answer 5

使用PhotoView库 https://github.com/renancaraujo/photo_view/blob/master/README.md 导入'package：photo_view / photo_view.dart';

 class DetailScreen extends StatelessWidget {

  Uint8List ul;
  String ta;
  DetailScreen(this.ul,this.ta);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PhotoView(
        imageProvider: MemoryImage(ul),
      )
    );
  }
}

Answer 6

本文将帮助您节省时间，其想法是使用标准的 showDialog 函数来包装您的小部件。

https://dubydu.medium.com/flutter-x-transparent-background-view-58bae5493217

如何在活动顶部创建透明的全屏对话框-Flutter

6 个答案: