如何在flutter中使用导航器打开非全屏页面?

时间:2018-12-26 01:11:19

标签: flutter flutter-layout

如下所示:

我想打开一个非全屏页面,如对话框,但不是对话框,我该怎么做,请帮助我,谢谢!

enter image description here

1 个答案:

答案 0 :(得分:1)

您可以在有状态的小部件内使用堆栈小部件。

下面的示例明确了您的想法。

按一下浮动操作按钮,您可以将前景置于背景之上。

import 'package:flutter/material.dart';

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

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

  @override
  MyHomePageState createState() {
    return new MyHomePageState();
  }
}

class MyHomePageState extends State<MyHomePage> {
  int change=0;

  dialog(){
    return Center(
      child: new Container(
        height: 200.0,
        width: 200.0,
        color: Colors.amber,
      ),
    );

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          new Container(
            color: Colors.lightBlueAccent,
            width: double.infinity,
            height: double.infinity,
          ),
          change==1?dialog():Container()
        ],
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: (){
            setState(() {
              if(change==0){
                change=1;
              }else{
                change=0;
              }
            });
          }
      ),
    );
  }
}