【Flutter】开发之功能篇(七)

5,707 阅读3分钟

前言

这一篇,我们继续说实际开发中会用到的一些功能。

启动页

Android启动页

android/app/src/main/res/drawable/launch_background.xml中已经有写好的启动页,只需修改即可

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
     <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

如果有更进一步的需求,比如说要在启动页加载广告图,并延时几秒的功能,就需要自己实现了。

思路如下

在main方法中返回自己定义的SplashWidgit(名字随便起),在其中处理自己的逻辑,包括加载广告图、设置延时等,延时结束后,跳转至真正的主页即可。

状态栏

  • 状态栏颜色

1.使用MaterialApptheme属性,theme: ThemeData(primaryColor: Colors.green)请注意:这个是全局的

image.png
2.使用AppBarbackgroundColor属性,backgroundColor: Colors.deepOrange
image.png
3.不使用AppBar,由于Flutter默认是从屏幕最顶部开始布局,所以,修改状态栏颜色简直太容易,只需要通过MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top取得状态栏高度即可。

Container(
      color: Colors.white,
      child: Column(
        children: <Widget>[
          Container(
            //状态栏高度
            height: MediaQueryData.fromWindow(WidgetsBinding.instance.window)
                .padding
                .top,
            color: Colors.blue,
          ),
          Container(
            height: 200,
            color: Colors.brown,
          ),
        ],
      ),
    );

image.png
甚至你可以修改为渐变色,修改Containerdecoration属性

          decoration: BoxDecoration(
              gradient: LinearGradient(
            colors: [Colors.cyan, Colors.brown, Colors.deepOrange],
          )),

image.png

  • 字体颜色

使用AppBarbrightness属性:Brightness.light为黑色,Brightness.dark为白色;

不使用AppBar时,可以通过嵌套AnnotatedRegion<SystemUiOverlayStyle>来实现。

class StatusDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: AnnotatedRegion<SystemUiOverlayStyle>(
        child: Column(
          children: <Widget>[
            Container(
              height: 200,
              color: Colors.brown,
            ),
          ],
        ),
        value: SystemUiOverlayStyle(
            statusBarColor: Colors.cyan,
            //有Appbar时,会被覆盖
            statusBarIconBrightness: Brightness.light,
            //底部navigationBar背景颜色
            systemNavigationBarColor: Colors.white),
      ),
    );
  }
}
  • 渐变色

使用AppBarflexibleSpace,其中渐变方式还可选择RadialGradientSweepGradient

      appBar: AppBar(
        title: Text('DemoPage'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
            colors: [Colors.cyan, Colors.brown, Colors.deepOrange],
          )),
        ),
      )

image.png

返回键监听

可以WillPopScope 嵌套,可以用于监听处理返回键的逻辑。其实WillPopScope 并不是监听返回按键,是当前页面将要被pop时触发的回调。

class _StatusDemoState extends State<StatusDemo> {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: StatusWidget(),
      onWillPop: () {
        ///如果返回 return new Future.value(false); popped 就不会被处理
        ///如果返回 return new Future.value(true); popped 就会触发
        ///这里可以通过 showDialog 弹出确定框,在返回时通过 Navigator.of(context).pop(true);决定是否退出
        return showExitDialog(context);
      },
    );
  }

  Future<bool> showExitDialog(BuildContext context) {
    return showDialog(
        context: context,
        builder: (BuildContext content) {
          return AlertDialog(
            title: Text("提示"),
            content: Text("确认退出吗?"),
            actions: <Widget>[
              GestureDetector(
                child: Container(
                  child: Text('退出'),
                ),
                onTap: () {
                  Navigator.of(context).pop(true);
                },
              ),
              GestureDetector(
                child: Container(
                  child: Text('取消'),
                ),
                onTap: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        });
  }
}

选取图片

使用的是Flutter提供的image_picker

首先,在pubspec.yaml文件中添加依赖image_picker: '0.6.0+8'

class TakeDemo extends StatefulWidget {
  @override
  _TakeDemoState createState() => _TakeDemoState();
}

class _TakeDemoState extends State<TakeDemo> {
  File _image;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.only(top: 20),
      alignment: AlignmentDirectional.center,
      child: Column(
        children: <Widget>[
          FlatButton(
            onPressed: () {
              getImage();
            },
            child: Text('从相册选择'),
          ),
          Center(
            child: _image == null
                ? Text('No image selected.',style: TextStyle(fontSize: 14),)
                : Image.file(_image),
          ),
        ],
      ),
    );
  }

  Future getImage() async {
    //gallery相册,camera拍照
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      _image = image;
    });
  }
}

20190524_114834.gif

你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢