【问题标题】:how can i build white region of this screen using flutter?如何使用颤振构建此屏幕的白色区域?
【发布时间】:2025-12-07 22:10:01
【问题描述】:

我是 Flutter 框架的新手,我想创建以下活动,我知道如何创建活动永久区域但我不知道这个屏幕的白色部分,这个屏幕中使用的小部件是什么,请指导我如何使用 Flutter 创建这部分?

这是我的代码

    import 'package:flutter/material.dart';
    
    import 'bottomnavigationbar.dart';
    
    class Contact extends StatefulWidget {
      @override
      _ContactState createState() => _ContactState();
    }
    
    class _ContactState extends State<Contact> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Contact"),
          ),
    
          body: Container(
    
            padding: EdgeInsets.all(1),
            color: Colors.black,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.width/1.6,
                //  constraints: BoxConstraints.expand(),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/contactpage.png"),
                        fit: BoxFit.cover),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(8),
                ),
                Text(
                  "Contact Info",
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 20,
                    fontWeight: FontWeight.w400,
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(8),
                ),
                Divider(
                  color: Colors.white,
                  indent: 40,
                  endIndent: 40,
                ),
              ],
            ),
          ),
          bottomNavigationBar: BottomNavigation(),
        );
      }
    }

【问题讨论】:

    标签: android android-studio flutter user-interface dart


    【解决方案1】:

    试试这个例子

    import 'package:flutter/material.dart';
    
    class UsingAlertDialog extends StatefulWidget{
      @override
      UsingAlertDialogState createState()=> new UsingAlertDialogState();
    }
    
    class UsingAlertDialogState extends State<UsingAlertDialog>{
      AlertDialog dialog = new AlertDialog(
        content: new Text(
          "I'm a AlertDialog",
          style: new TextStyle(fontSize: 30.0),
        ),
      );
      @override
      Widget build(BuildContext context){
        return Scaffold(
          appBar: new AppBar(
            title: new Text("Using Alert Dialog"),
          ),
          body: new Container(
            child: new Center(
              child: new RaisedButton(
                child: new Text("Touch Me"),
                onPressed: (){
                  showDialog(
                    context: context,
                    builder: (BuildContext context)=>dialog
                  );
                },
              ),
            ),
          ),
        );
      }
    }
    

    ========= 更新 ========

    模型组件可以是自定义Dialog SimpleDialog

    关于电话你可以使用这个包 url_launche

    【讨论】:

    • 我想先显示这个弹出窗口......我该怎么做?
    • 我的意思是当我移动到这个活动时,会显示弹出窗口,点击屏幕的其他区域会自动隐藏