import 'package:flutter/material.dart';

class StateLessDemoWidget extends StatelessWidget {
 /// 如果定義非final修飾的成員變量，會提示
 /// This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: StateLessDemoWidget.listInde
 /// int [listIndex];
 @override
 Widget build(BuildContext context) {
 return Container();
 }
}

import 'package:flutter/material.dart';

/// 創(chuàng)建一個繼承[StatefulWidget]的widget類
/// 這個類的效果類似收藏，有個空心的愛心圖標(biāo)
/// 點擊一下愛心填充紅色，再點擊一次就取消填充
class FavoriteWidget extends StatefulWidget {
 @override
 _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

/// [State]類，F(xiàn)avoriteWidget的具體實現(xiàn)
/// 包含一個狀態(tài)[_isFavorited]
class _FavoriteWidgetState extends State<FavoriteWidget> {
 bool _isFavorited = true;

 @override
 Widget build(BuildContext context) {
 return Row(
 mainAxisSize: MainAxisSize.min,
 children: [
 Container(
 padding: EdgeInsets.all(0),
 child: IconButton(
 /// [_isFavorited] 為 true 時使用圖標(biāo) Icons.star 否則使用 Icons.star_border
 icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),

 color: Colors.red[500],

 /// 當(dāng)點擊時，改變狀態(tài)
 onPressed: _toggleFavorite,
 ),
 ),
 ],
 );
 }

 /// 改變[_isFavorited]的狀態(tài)
 void _toggleFavorite() {
 setState(() {
 if (_isFavorited) {
 _isFavorited = false;
 } else {
 _isFavorited = true;
 }
 });
 }
}

import 'package:flutter/material.dart';

class TapboxA extends StatefulWidget {
 @override
 _TapboxAState createState() => _TapboxAState();
}
/// [TapboxA]擁有狀態(tài)[_active]，通過[_handleTap]方法管理[_active]
class _TapboxAState extends State<TapboxA> {
 bool _active = false;

 void _handleTap() {
 setState(() {
 _active = !_active;
 });
 }
 Widget build(BuildContext context) {
 return GestureDetector(
 onTap: _handleTap,
 child: Center(
 child: Text(
 _active ? 'Active' : 'Inactive',
 ),
 ),
 );
 }
}

import 'package:flutter/material.dart';

/// 父部件管理TapboxB的狀態(tài)
///
/// 父部件[ParentWidget]定義了[_active]狀態(tài)，并和[TapboxB]的[active]綁定
/// 當(dāng)[TapboxB]被點擊時，通過[onChanged]方法通知父部件，父部件修改[_active]的值
/// 也就間接修改了[TapboxB]的[active]
///
/// 如果了解過Vue的v-model原理的話比較好理解，其實這個和Vue的v-model一樣的

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

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

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

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

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

//------------------------- TapboxB ----------------------------------

// 注意[TapboxB]是無狀態(tài)部件，所有成員變量使用 final 修飾
class TapboxB extends StatelessWidget {
 // 必須傳遞onChanged，用于通知父部件
 TapboxB({Key key, this.active: false, @required this.onChanged})
 : super(key: key);
 final bool active;
 final ValueChanged<bool> onChanged;

 void _handleTap() {
 // 通知父部件修改 active 的值
 onChanged(!active);
 }

 Widget build(BuildContext context) {
 return GestureDetector(
 // 被點擊時
 onTap: _handleTap,
 child: Center(
 child: Text(
 // active 改變時修改文本的內(nèi)容
 active ? 'Active' : 'Inactive',
 ),
 ),
 );
 }
}

import 'package:flutter/material.dart';
//---------------------------- ParentWidget ----------------------------

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

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

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

 @override
 Widget build(BuildContext context) {
 return Container(
 child: 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() => _TapboxCState();
}

class _TapboxCState extends State<TapboxC> {
 /// [TapboxC]管理內(nèi)部的邊框是否高亮，通過狀態(tài)[_highlight]來修改
 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) {
 return GestureDetector(
 // onXXX都是事件處理
 onTapDown: _handleTapDown,
 onTapUp: _handleTapUp,
 onTap: _handleTap,
 onTapCancel: _handleTapCancel,
 child: Container(
 child: Center(
 child: Text(widget.active ? 'Active' : 'Inactive',
 style: TextStyle(fontSize: 32.0, color: Colors.white)),
 ),
 width: 200.0,
 height: 200.0,
 decoration: BoxDecoration(
 color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
 // 邊框是否高亮顯示
 border: _highlight
 ? Border.all(
  color: Colors.teal[700],
  width: 10.0,
 )
 : null,
 ),
 ),
 );
 }
}