Flutter应用程序中每个页面的多个脚手架

Question

这是否意味着只有一个单一的脚手架下的材料应用程序或一个单亲脚手架为每个页面。如果是第一次，我们怎么导航？如果它更晚，这不是意味着在每次导航中重新呈现公共的appbar和bottombar吗？最好的做法是什么。

Answer 1

这意味着，通常每个页面应该有一个脚手架（更准确地说，每个路由/screen)，并且不应该嵌套脚手架。

例如，看一下可以在DartPad中运行的这个代码片段：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

在这里，您可以看到有两个不同的页面/routes/screens，每个页面都有自己的scaffold。我们使用navigator来回导航，因此我们的页面被添加到堆栈中，一个scaffold放在另一个之上。那很好。

另一方面，看一下这个例子：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Scaffold(
        body: Center(
          child: RaisedButton(
            child: Text('Open route'),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

在这里，我们嵌套了两个脚手架，正如您所看到的，第二个应用程序栏被绘制在第一个应用程序栏的下面。这不是选项卡式或嵌套式导航的最佳方法。如果要在scaffold的主体中导航，并根据内容更改应用程序栏，则首选使用tabcontroller，如defaulttabcontroller。看一下这个例子：

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

正如您所看到的，我们只使用了一个脚手架，因为我们实际上只处理一个屏幕。碰巧我们想要显示内容页并在scaffold的主体中导航。