Flutter学习Day5 Widget StatelessWidget => StatefulWidget 实作

大家安安 晚上好~~

今天要把专案里的StatelessWidget 更改成为 StatefulWidget
我想要加入点讚的功能去计算我的宠物的讚数

首先我们先加入按讚的按钮
及显示的的讚数

程式码的部分则加入一段

IconButton(    onPressed: () => {        pet.likes++    },    icon: Icon(          Icons.thumb_up,          color: Colors.blue,          ),       ),    ]),SizedBox(    height: 16.0,),Text(    'Likes:${pet.likes}',    style: TextStyle(color: Colors.blue, fontSize: 26.0),),

但是这样的话点击了讚的按钮并不会+1

所以我们改成 StatefulWidget来让点击时能够+1

class Petdialog extends StatefulWidget {  Petdialog({Key key, this.pet}) : super(key: key);  final Pet pet;  @override  State<StatefulWidget> createState() => _DialogState();}

class _DialogState extends State<Petdialog> {  @override  Widget build(BuildContext context) {    ThemeData localTheme = Theme.of(context);    return SimpleDialog(      contentPadding: EdgeInsets.zero,      children: [        Image.network(widget.pet.imageUrl, fit: BoxFit.fill),        Padding(          ...          child: Column(            ...            children: [              ...              Row(children: [              ...                IconButton(                  onPressed: () => {                    setState(() => {widget.pet.likes++})                  },                ...    );  }}

hotReload 一下

可以看到 讚数成功变更了
但是发现了位于Parent Widget(图片画面左上角)的讚数却没变更

所以我们又要来修改一下程式码

class Petdialog extends StatefulWidget {  Petdialog({Key key, this.pet, @required this.notifyParent}) : super(key: key);  final Function() notifyParent; ...}...       IconButton(                  onPressed: () => {                    setState(() => {widget.pet.likes++, widget.notifyParent()})                  },                  icon: Icon(                    Icons.thumb_up,                    color: Colors.blue,                  ),                ),                ....

class _MyPetState extends State<MyPet> {  refresh() {    setState(() {});  }  Widget _dialogBuilder(BuildContext context, Pet pet) {    return Petdialog(      pet: pet,      notifyParent: refresh,    );  }  ....

MyPet也改成StatefulWidget
并传入callbackfn 去更改 清单上的讚数

成功的把讚数binding起来

详细程式码可以到我的GitHub上
点此连结

好拉下一篇就会讲解 InheritedWidget 是甚么?
大家ㄅㄅ