Flutter应用

1、使用CupertinoAlertDialog点击按钮返回数据

关键点：我们使用async异步的方式，然后使用final result = await showDialog，点击之后等待结果的返回，获取result，打印结果。

  return GestureDetector(
                        onTap: () async{
                          final result = await showDialog(
                              context: context,
                              builder: (BuildContext context) {
                                return CupertinoAlertDialog(
                                  title: Text("提示信息"),
                                  content: Text("你要怎么处理这些问题呢？"),
                                  actions: [
                                    CupertinoDialogAction(
                                      child: Text("取消"),
                                      onPressed: (){
                                        Navigator.of(context).pop("我点击了取消");
                                      },
                                    ),

                                    CupertinoDialogAction(
                                      child: Text("确定"),
                                      onPressed: (){
                                        Navigator.of(context).pop("我点击了确定");
                                      },
                                    )
                                  ],
                                );
                              });
                          print(result);
                        },

image.png

2、上个界面向下一个界面传递内容

通过arguments传递方法，然后我们通过

Navigator.of(context).pushNamed('/MyTabbarView1',arguments: {"name":"我是传参哦"});

获取的数据为：

 Object? teacherMap = ModalRoute.of(context)!.settings.arguments;
    print("传递过来的数据为：${teacherMap}");
打印数据为：
flutter: 传递过来的数据为：{name: 我是传参哦}

3、不要导航栏，顶部显示背景图

注意点：
1、如果需要图片显示到导航栏下方，那么我们就不需设置padding，直接使用Container即可。那么下面的显示组件需要使用Stack，或者设置padding，距离顶部MediaQuery.of(context).padding.top，这个是安全区域的高度。如图1
2、如果需要图片显示到导航栏下面，那么我们就设置padding。如图2
图1:

class TopImagePage extends StatefulWidget{
  @override
  _topImagePage createState() =>  _topImagePage();
}

class _topImagePage extends State<TopImagePage>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: SingleChildScrollView(  //他自己会预留出来所有的高度
        child: Container(
          color: Colors.orange,
          // height: MediaQuery.of(context).size.height,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Stack(
                children: [
                  Image.network('https://img0.baidu.com/it/u=4071201799,223427537&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=218'),
                  Positioned(
                      top: MediaQuery.of(context).padding.top,
                      right: 80,
                      child: Container(
                        width: 30,
                        height: 30,
                        color: Colors.redAccent,
                        child: Icon(Icons.phone),
                      )
                  )
                ],
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: 400,
                color: Colors.redAccent,
                child: Text("第一个"),
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: 400,
                color: Colors.orange,
                child: Text("第2个"),
              ),           
            ],
          ),
        ),
      ),
    );  
  }
} 

效果图1

图2:

class NoNavBarPage extends StatefulWidget {
  @override
  _noNavBarPage createState() => _noNavBarPage();
  }
  class _noNavBarPage extends State<NoNavBarPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    var showPadding = true;
    return Scaffold(
      body: Container(
          // key: Key('Homekey'),
          child: Container(
            color: Colors.orange[800],
            child: Padding(
              padding: EdgeInsets.fromLTRB(10, MediaQuery.of(context).padding.top, 10, MediaQuery.of(context).padding.bottom),
              child: Column(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: Container(
                      height: 50,width: 400,color: Colors.red,
                      child:Image.network('https://img0.baidu.com/it/u=4071201799,223427537&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=218',fit: BoxFit.cover,),
                    ),
                  ),
                Container(
                    height: 35,
                    child: HomeTextFiled(
                      ontap: () {
                        // Navigator.of(context).push("/search");
                        print('点击搜索');
                      },
                    ),
                  ),
                  GNav(                                      ],
              ),
            ),
          )),
    );
  }
  }

效果图2

4、SingleChildScrollView

类似于iOS的UIScrollView，如果组件超出屏幕高度的话，它就可以滚动。通常应用在滚动少量的元素。比如用户的我的页面，listView可能超出屏幕几个的情况，我们就可以使用SingleChildScrollView。