Flutter中为控件添加交互，Android多态实现原理

),

),

new SizedBox(

width: 18.0,

child: new Container(

child: new Text(’$_favoriteCount’),

),

),

],

);

}

}

代码运行结果如下：

3.管理状态

---

有多种方法可以管理状态，用户可以选择使用何种管理方法,一般而言就在父widget中管理状态。

1.widget管理自己的state

有些情况下widget在内部管理其状态是最好的。例如， 当ListView的内容超过渲染框时， ListView自动滚动。大多数使用ListView的开发人员不想管理ListView的滚动行为，因此ListView本身管理其滚动偏移量。 class TapBoxA extends StatefulWidget{ @override State createState() { return new _TapBoxA(); } }

class _TapBoxA extends State{

bool _active = false;

void _handleTap(){

setState(() {

_active = !_active;

});

}

@override

Widget build(BuildContext context) {

return new GestureDetector(

onTap: _handleTap,

child: new Container(

child: new Center(

child: new Text(

_active ? “Active” : “Inactive”,

style: new TextStyle(fontSize: 32, color: Colors.white),

),

),

width: 200.0,

height: 200.0,

decoration: new BoxDecoration(

color: _active ? Colors.lightGreen[700] :Colors.grey[600],

),

),

);

}

}

代码运行效果如图：

2.父widget管理widget的状态

对于父widget来说，管理状态并告诉其子widget何时更新通常是最有意义的。 例如，IconButton允许您将图标视为可点按的按钮。 IconButton是一个无状态的小部件，因为我们认为父widget需要知道该按钮是否被点击来采取相应的处理。在以下示例中，TapboxB通过回调将其状态导出到其父项。由于TapboxB不管理任何状态，因此它的父类为StatelessWidget。

class ParentWidget extends StatefulWidget{

@override

State createState() {

return new _ParentWidgetState();

}

}

class _ParentWidgetState extends State{

bool _active = false;

void _handleTapboxChanged(bool newValue){

setState(() {

_active = newValue;

});

}

@override

Widget build(BuildContext context) {

return new Container(

child: TapBoxB(

active: _active,

onChanged: _handleTapboxChanged,

),

);

}

}

class TapBoxB extends StatelessWidget{

TapBoxB({Key key, this.active: false, @required this.onChanged})

super(key: key);

final bool active;

final ValueChanged onChanged;

void _handleTap(){

onChanged(!active);

}

@override

Widget build(BuildContext context) {

return new GestureDetector(

onTap: _handleTap,

child: new Container(

child: new Center(

child: new Text(

active ? “Active” : “Inactive”,

style: new TextStyle(fontSize: 32, color: Colors.white),

),

),

width: 200,

height: 200,

decoration: new BoxDecoration(

color: active ? Colors.lightGreen[700] :Colors.grey[600],

),

),

);

}

}

代码效果：

3.混搭管理

对于一些widget来说，混搭管理的方法最有意义的。在这种情况下，有状态widget管理一些状态，并且父widget管理其他状态。

在TapboxC示例中，点击时，盒子的周围会出现一个深绿色的边框。点击时，边框消失，盒子的颜色改变。 TapboxC将其_active状态导出到其父widget中，但在内部管理其_highlight状态。这个例子有两个状态对象_ParentWidgetState和_TapboxCState。

class ParentWidget extends StatefulWidget {

@override

_ParentWidgetState createState() => new _ParentWidgetState();

}

class _ParentWidgetState extends State {

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 onChanged;

_TapboxCState createState() => new _TapboxCState();

}

class _TapboxCState extends State {

bool _highlight = false;

void _handleTapDown(TapDownDetails details) {

setState(() {

_highlight = true;

});
is.active: false, @required this.onChanged})

: super(key: key);

final bool active;

final ValueChanged onChanged;

_TapboxCState createState() => new _TapboxCState();

}

class _TapboxCState extends State {

bool _highlight = false;

void _handleTapDown(TapDownDetails details) {

setState(() {

_highlight = true;

});