更新有状态小部件的一部分

Question

我对Flutter很陌生。 我有一个有状态的小部件。每次我单击计数器时，整个构建功能都会运行，并且结果会更新。 但是有没有办法使它成为无状态小部件并以某种方式仅更新相关部分，从而避免重新构建屏幕？

我有一个有状态的小部件。每次我单击计数器时，整个构建功能都会运行，并且结果会更新。 但是有没有办法使它成为无状态小部件并以某种方式仅更新相关部分，从而避免重新构建屏幕？

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MaterialApp(
        home:Home(),
      ));
    }
    class Home extends StatefulWidget {
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State {
    
      int long =  0;
    
      void increaseCounter(){
        setState(() {
          long++;
        });
      }
    
      void decreaseCounter(){
        if(long > 0) {
          setState(() {
            long--;
          });
        }
      }
    
      Text numberOfDeliveries(){
    
        return Text(
          '$long deliveries today',
          style: TextStyle(
            color:Colors.white,
            fontSize: 24.0,
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title:Text('Deliveries'),
            backgroundColor: Colors.green,
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                child: Container(
                  color: Colors.blue,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Expanded(
                        child:Padding(
                          padding: const EdgeInsets.symmetric(vertical: 32.0, horizontal: 0.0),
                          child: Text(
                            'Long',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontSize: 32.0,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        child:
                            // is it possible to update this without running the whole build again?
                          numberOfDeliveries(),
                      ),
                      Expanded(
                        child: Row(
                          children: [
                            Expanded(
                              child: Container(
                                padding: EdgeInsets.symmetric(vertical: 32.0,  horizontal: 0.0),
                                color:Colors.blue[100],
                                child: FlatButton(
                                  onPressed: (){
                                    decreaseCounter();
                                  },
                                  child: Text('-'),
                                ),
                              ),
                            ),
                            Expanded(
                              child: Container(
                                padding: EdgeInsets.symmetric(vertical: 32.0,  horizontal: 0.0),
                                color:Colors.blue[500],
                              ),
                            ),
                            Expanded(
                              child: Container(
                                padding: EdgeInsets.symmetric(vertical: 32.0,  horizontal: 0.0),
                                color:Colors.blue[900],
                                child: FlatButton(
                                  onPressed: (){
                                    increaseCounter();
                                  },
                                  child: Text('+'),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.blue[800],
                  child: Row(
                    children: [
                      Text('Bottom'),
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      }
    }