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 去更改清单上的赞数