flutter 入门与实战

自定义触摸回调组件

• 定义组件所包含的子组件
• 定义背景触摸颜色
• 定义点击事件

import 'package:flutter/material.dart';

//触摸回调组件
class TouchCallBack extends StatefulWidget{
  //子组件
  final Widget child;
  //回调函数
  final VoidCallback onPressed;
  //是否添加背景色
  final bool isfeed;
  //背景色
  final Color background;
  //构造方法 传入参数列表
  TouchCallBack({Key key,
    //使用@required说明它是一个必传的参数
    @required this.child,
    @required this.onPressed,
    this.isfeed:true,
    this.background:const Color(0xffd8d8d8),
    //调用父类的方法
  }):super(key:key);
  @override
  TouchState createState() => TouchState();
}

class TouchState extends State<TouchCallBack>{
  Color color =  Colors.transparent;
  @override
  Widget build(BuildContext context) {
    //返回手势检测 GestureDetector对象
    return GestureDetector(
      //使用Container容器包裹
      child: Container(
        color: color,
        child: widget.child,
      ),
      //点击屏幕
      onTap: widget.onPressed,
      //指针已接触屏幕并可能开始移动;按下去要设置颜色
      onPanDown: (d){
        //判断是否添加点击背景
        if(widget.isfeed == false) return;
        setState(() {
          color = widget.background;
        });
      },
      //先前触发 onPanDown 的指针未完成;抬手后要设置颜色
      onPanCancel: (){
        setState(() {
          color = Colors.transparent;
        });
      },
    );
  }

}

自定义个人页item样式组件

• 定义组件所包含的属性（标题，图片或者图标）
• 定义点击回调事件
• 定义dialog
• 添加路由跳转到网页

import 'package:flutter/material.dart';
import './touch_callback.dart';

//通用列表项
class ImItem extends StatelessWidget{
  //标题
  final String title;
  //图片路径
  final String imagePath;
  //图标
  final Icon icon;

  ImItem({Key key,@required this.title,this.imagePath,this.icon}):super(key:key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return TouchCallBack(
      onPressed: (){
        //判断点击的项
        switch(title){
          case 'flutter官网':
            //路由到Flutter官网 动态页面
            Navigator.pushNamed(context, '/flutter');
            break;
          case '清理缓存':
            showAlertDialog(context,"确认清理吗？");
            break;
          case '退出登录':
            showAlertDialog(context,"确认退出吗？");
            break;
        }
      },
      //展示部分
      child: Container(
        height: 50.0,
        child: Row(
          children: <Widget>[
            //图标或图片
            Container(
              child: imagePath != null
                  ? Image.asset(
                imagePath,
                width: 32.0,
                height: 32.0,
              )
                  : SizedBox(
                height: 32.0,
                width: 32.0,
                child: icon,
              ),
              margin: const EdgeInsets.only(left: 22.0,right: 20.0),
            ),
            //标题
            Text(
              title,
              style: TextStyle(fontSize: 16.0,color: Color(0xFF353535)),
            ),
          ],
        ),
      ),
    );
  }
  //对话框本质上是属于一个路由的页面route，由Navigator进行管理，所以控制对话框的显示和隐藏，也是调用Navigator.of(context)的push和pop方法
  void showAlertDialog(BuildContext context,String title) {
    showDialog(
        context: context,
        //是否可以通过点击屏障来关闭路由
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
            //content: Text("确认退出吗?"),
            title: Center(
              child: Text(
                title,
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold),
              ),
            ),
            actions: <Widget>[
              //扁平按钮组件 点击时会有一个阴影效果
              FlatButton(
                onPressed: () {
                  //从导航器中弹出最上面的路由
                  Navigator.of(context).pop();
                },
                child: Text("确定",style: TextStyle(color: Colors.lightBlue),),
              ),
              FlatButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text("取消",style: TextStyle(color: Colors.lightBlue),),
              )
            ],
          );
        });
  }
}

  //添加页面跳转路由
      routes: {
        'LoginPage': (BuildContext context) => LoginPage(),
        'RegisterPage': (BuildContext context) => RegisterPage(),
        'AppPage': (BuildContext context) => AppPage(),
        //WebviewScaffold 是Flutter用来实现网页浏览的组件
        '/flutter': (_) => new WebviewScaffold(
          //Webview插件
          url: "https://flutter.io/",//指定的网址的URL
          appBar: new AppBar(
            title: new Text("Flutter官网"),
          ),
          withZoom: true,//是否缩放界面
          withLocalStorage: true,//是否本地存储
        ),
      },

个人页面

• 定义组件所包含的属性（标题，图片或者图标）
• 定义点击回调事件
• 定义dialog
  强调文本

import 'package:flutter/material.dart';
import '../common/touch_callback.dart';
import '../common/im_item.dart';

//我的页面
class MePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //列表
      body: ListView(
        children: <Widget>[
          //头像部分实现
          Container(
            margin: const EdgeInsets.only(top: 20.0),
            color: Colors.white,
            height: 80.0,
            child: TouchCallBack(
              child: Row(
                //垂直方向居中对齐
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  //添加头像
                  Container(
                    margin: const EdgeInsets.only(left: 12.0, right: 15.0),
                    child: CircleAvatar(
                      backgroundImage: AssetImage('assets/images/home.png'),
                      maxRadius: 30,
                    ),
                  ),
                  //用户名及帐号显示
                  Expanded(
                    child: Column(
                      //垂直方向居中对齐
                      mainAxisAlignment: MainAxisAlignment.center,
                      //水平方向居中对齐
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          'DoctorWei',
                          style: TextStyle(
                            fontSize: 18.0,
                            color: Color(0xFF353535),
                          ),
                        ),
                        Text(
                          '邮箱: 1348172474@qq.com',
                          style: TextStyle(
                            fontSize: 14.0,
                            color: Color(0xFFa9a9a9),
                          ),
                        ),
                      ],
                    ),
                  ),
                  //二维码图片显示
                  Container(
                    margin: const EdgeInsets.only(left: 12.0, right: 15.0),
                    child: Image.asset(
                      'assets/images/code.png',
                      width: 24.0,
                      height: 24.0,
                    ),
                  ),
                ],
              ),
              onPressed: () {},
            ),
          ),
          //列表项 使用ImItem渲染
          Container(
            margin: const EdgeInsets.only(top: 20.0),
            color: Colors.white,
            child: ImItem(
              title: 'flutter官网',
              imagePath: 'assets/images/icon_me_friends.png',
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 20.0),
            color: Colors.white,
            child: Column(
              children: <Widget>[
                ImItem(
                  imagePath: 'assets/images/icon_me_message.png',
                  title: '消息管理',
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 15.0, right: 15.0),
                  child: Divider(
                    height: 0.5,
                    color: Color(0xFFd9d9d9),
                  ),
                ),
                ImItem(
                  imagePath: 'assets/images/icon_me_photo.png',
                  title: '我的相册',
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 15.0, right: 15.0),
                  child: Divider(
                    height: 0.5,
                    color: Color(0xFFd9d9d9),
                  ),
                ),
                ImItem(
                  imagePath: 'assets/images/icon_me_file.png',
                  title: '我的文件',
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 15.0, right: 15.0),
                  child: Divider(
                    height: 0.5,
                    color: Color(0xFFd9d9d9),
                  ),
                ),
                ImItem(
                  imagePath: 'assets/images/icon_me_service.png',
                  title: '联系客服',
                ),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(top: 20.0),
            color: Colors.white,
            child: ImItem(
              title: '清理缓存',
              imagePath: 'assets/images/icon_me_clear.png',
            ),
          ),
           Container(
              margin: const EdgeInsets.only(top: 20.0),
              color: Colors.white,
              child: ImItem(
                title: '退出登录',
                imagePath: 'assets/images/ic_arrow_back.png',
              ),
            ),
        ],
      ),
    );
  }


}