Flutter 自定义UI控件并设置交互能力

1.自定义UI控件

首先UI控件按照是否能够与用户交互分为交互型控件和非交互型控件。

下面就是创建了一个交互型控件，只是关于界面是空的，如果我们继承StatelessWidget就是创建了一个非交互型控件，比如我们最顶层的容器MyApp就是一个非交互型控件

至于MyWidgetState是来实现UI控件的界面

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => new _MyWidgetState();
}

2.设置交互能力和绘画界面

为何这两者一起弄呢，因为我们在绘画界面时是使用其他系统控件，相当于往一个ViewGroup里放几个TextView一样，然后我们在TextView上设置点击事件，这个点击事件就可以作为整个ViewGroup的交互能力之一

下面就是通过使用一个Text显示了一个 Active 的字样，并用BoxDecoration设置了一个绿色的背景色，然而没有点击事件

class _TapboxCState extends State<TapboxC> {

  Widget build(BuildContext context) {
    return new GestureDetector(

      child: new Container(
        child: new Center(
          child: new Text(
            'Active' ,
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color: Colors.lightGreen[700]
        ),
      ),
    );
  }
}

如果我们要监听这个控件的触摸事件，需要在这个类里加上这些代码，并且实现这个触发函数

      onTapDown: _handleTapDown, // Handle the tap events in the order that
      onTapUp: _handleTapUp,     // they occur: down, up, tap, cancel
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,

onTapDown：手指按压在控件时触发，相当于 MotionEvent.ACTION_DOWN

onTapUp：手指按压在控件后抬起手指时触发，类似MotionEvent.ACTION_UP

onTap：这个也是手指按压在控件后抬起手指时触发，不过相当于onClick

onTapCancel：类似点击事件取消，比如你手指按压在控件上，然后移动到控件范围外时触发，类似MotionEvent.ACTION_CANCEL

首先我贴一个官网实现的效果图，也就是开始是右边的状态，点击一次后是左边的状态，后面再点击这就换成另外一种状态。

而且无论是什么状态，只要手指放上去就会出现蓝色的边框，手指放开边框就会消失

代码如下，大家可以自己运行看看

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

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

void main() {
  runApp(new MyApp());
}

//---------------------------- ParentWidget ----------------------------

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => new _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  bool _active = false;

  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapboxC(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

//----------------------------- TapboxC ------------------------------

class TapboxC extends StatefulWidget {
  TapboxC({Key key, this.active: false, @required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  _TapboxCState createState() => new _TapboxCState();
}

class _TapboxCState extends State<TapboxC> {
  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  Widget build(BuildContext context) {
    // This example adds a green border on tap down.
    // On tap up, the square changes to the opposite state.
    return new GestureDetector(
      onTapDown: _handleTapDown, // Handle the tap events in the order that
      onTapUp: _handleTapUp,     // they occur: down, up, tap, cancel
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: new Container(
        child: new Center(
          child: new Text(
            widget.active ? 'Active' : 'Inactive',
            style: new TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: new BoxDecoration(
          color:
          widget.active ? Colors.lightGreen[700] : Colors.grey[600],
          border: _highlight
              ? new Border.all(
            color: Colors.teal[700],
            width: 10.0,
          )
              : null,
        ),
      ),
    );
  }
}

//------------------------------- MyApp --------------------------------

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Flutter Demo'),
        ),
        body: new Center(
          child: new ParentWidget(),
        ),
      ),
    );
  }
}

3.结论

自定义控件说白了就是自定义ViewGroup，界面我们可以使用系统控件（VIew、VIewGroup）去实现，而交互能力则是通过实现监听触摸事件完成