向 Scaffold Appbar 添加具有多个页面的点击计数器

Posted 2023-02-23

【中文标题】向 Scaffold Appbar 添加具有多个页面的点击计数器

【英文标题】：Add to Scaffold Appbar a click counter with multiple pages

【发布时间】：2021-04-02 13:08:33

【问题描述】：

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

【参考方案1】：

正如@Randal Schwartz 所说，我们可以利用MaterialApp 类的onGenerateRoute 属性：

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 可以通过在其状态下加载，然后由 Widgets 显示：

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，以更好地管理应用中不同Widgets 之间的数据同步。

【参考方案2】：

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