Flutter 自定义UI控件并设置交互能力
1.自定义UI控件首先UI控件按照是否能够与用户交互分为交互型控件和非交互型控件。下面就是创建了一个交互型控件,只是关于界面是空的,如果我们继承StatelessWidget就是创建了一个非交互型控件,比如我们最顶层的容器MyApp就是一个非交互型控件至于MyWidgetState是来实现UI控件的界面class MyWidget extends StatefulWidget {@overr...
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)去实现,而交互能力则是通过实现监听触摸事件完成
更多推荐
所有评论(0)