向 Scaffold Appbar 添加具有多個頁面的點擊計數器

Question

您好，我正在使用導航器和路線創建具有多個頁面的應用程序。 我想向 Scaffold Appbar 添加一個計數器，每次手指點擊屏幕按鈕時都會增加一個計數器（如果它們在頁面中出現的按鈕不止一個）。 此外，如果我更改頁面，此計數器必須增加。 你能幫我理解這個問題嗎？ 我正在學習，因此該結構可能是“初學者”版本。 謝謝。

Answer 1

您可能可以將一些日志記錄掛接到 PageRouteBuilder，因為每條路由都從給定頁面經過那里（當然，它也必須在每個頁面上）。

Answer 2

正如@Randal Schwartz 評論的那樣，我們可以利用MaterialApp class 的onGenerateRoute屬性：

runApp(MaterialApp(
        home: BuilderPage(LoginArguments(false)),
        onGenerateRoute: generateRoute
));

通過定義自定義generateRoute function：

int counter = 0; // global variable outside of the classes

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case 'home':
      counter++;
      return MaterialPageRoute(builder: (_) => HomeScreen());
    case 'login':
      counter++;
      return MaterialPageRoute(builder: (_) => LoginScreen());
    case 'register':
      counter++;
      return MaterialPageRoute(builder: (_) => RegisterScreen());
  }
}

然后Widget可以通過將counter加載到它們的 state 中來顯示計數器：

class HomeScreen extends StatefulWidget {
  const HomeScreen({ Key key }) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  int _counter;

  @override
  void initState() {
    super.initState();
    setState(() => _counter = counter);
  }

  void _increaseCounter() {
     counter++;
     setState(() => _counter++);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(child: Text(_counter.toString())),
       body: SafeArea(
               child: Center(child: 
                  GestureDetector(
                     onTap: () { _increaseCounter(); }, 
                     child: Text('test'),
                 ),
              ),
           ),
       ),
    );
  }
}

注意：這個解決方案不是最優的。 請務必考慮更高級的 state 管理架構，例如BLoC ，以更好地管理應用程序中不同Widget之間的數據同步。