向 Scaffold Appbar 添加一个包含多个页面的点击计数器

Question

您好，我正在使用导航器和路由创建一个包含多个页面的应用程序。我想在 Scaffold Appbar 中添加一个计数器，每次手指点击屏幕按钮时该计数器都会递增（如果页面中出现的按钮不止一个）。此外，如果我更改页面，此计数器必须增加。你能帮我理解这个问题吗？我正在学习，所以该结构可能是“初学者”版本。谢谢。

Answer 1

您可能可以将一些日志记录挂接到 PageRouteBuilder，因为每个路由都从给定页面经过那里（当然，它也必须在每个页面上）。

Answer 2

正如@Randal Schwartz 评论的那样，我们可以利用 onGenerateRoute 属性的 MaterialApp class:

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

通过定义自定义 generateRoute 函数：

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());
  }
}

counter 然后可以通过 Widget 加载它们的状态来显示：

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'),
                 ),
              ),
           ),
       ),
    );
  }
}

注意：这个解决方案不是最优的。请务必考虑更高级的状态管理架构，例如 BLoC，以更好地管理应用中不同 Widget 之间的数据同步。

向 Scaffold Appbar 添加一个包含多个页面的点击计数器

Add to Scaffold Appbar a click counter with multiple pages

flutter

dart

routes

appbar

scaffold