關於Flutter中的StatefulWidget小最佳化

Flutter中使用StatefulWidget非常苦逼，寫一個類繼承StatefulWidget，還要寫一個類繼承State，大多數都是模板程式碼，我整理過一個程式碼模板，但是總感覺不是很爽。有沒有更簡潔的方式？於是我就想改造一下StatefulWidget，讓開發起來更簡潔。

這裡只有一個類，取名叫做usefulStatefulWidget，意思是對於使用StatefulWidget很有幫助，然後利用Dart類裡面的extends和with的特性，把StatefulWidget和State這兩個類做了一些封裝，具體程式碼如下：

abstract class usefulStatefulWidget extends _Stateful with State<StatefulWidget> {
  @override
  State<StatefulWidget> createState() => this;

  refresh() => setState(() {});
}

abstract class _Stateful extends StatefulWidget {}

這樣一來，我們寫程式碼就簡潔多了，不再需要去寫那麼多類了。例如，我們就把建立Flutter專案時，給我們提供的示例程式碼改造一下，如下：

import 'package:flutter/material.dart';
import 'package:demo/usefulStatefulWidget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '簡單實用的StatefulWidget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '簡單實用的StatefulWidget'),
    );
  }
}

class MyHomePage extends usefulStatefulWidget {
  MyHomePage({Key key, this.title});

  final String title;
  int _counter = 0;

  void _incrementCounter() {
    _counter++;
    refresh();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

這樣一來就節省了一些程式碼，寫起來也方便多了。

注意：如果需要使用到大量的state或者互動狀態需要更改，這種封裝其實沒有多大作用，因為我們要呼叫setState，封裝的程式碼裡面並沒有做任何處理。這裡只是提供了一種最佳化方式，僅供參考。

我是阿韋，專注於Flutter研究，更多Flutter學習乾貨可以看我的github: 歡迎大家關注。