在Flutter应用程序中，每个页面都有多个支架。

Question

在Flutter应用程序中，每个页面都有多个支架。

androidflutternavigationmaterial-designscaffolding

46

API文档：https://api.flutter.dev/flutter/material/Scaffold-class.html说：

Scaffold旨在成为MaterialApp的单个顶层容器，通常不需要嵌套Scaffold。例如，在选项卡式UI中，其中bottomNavigationBar是TabBar而body是TabBarView，您可能会尝试将每个选项卡栏视图作为Scaffold与具有不同标题的AppBar。更好的方法是添加侦听器到TabController以更新AppBar。

这是否意味着在Material App下只需要一个单独的Scaffold或每个页面都需要一个单独的父级Scaffold？如果是前者，我们如何导航？如果是后者，是否意味着公共的AppBar和BottomBar在每次导航时都会重新渲染？最佳实践是什么？

- dora

4

是后者。通常每页都有一个脚手架，是的，这意味着应用栏会重新渲染，但这不是问题。 - Ovidiu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- drogel · Accepted Answer

通常情况下，每个页面（更准确地说是每个Route/屏幕）应该有一个Scaffold，而且不应该嵌套Scaffold。

在屏幕之间导航

例如，看一下这个代码片段，在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!'),
        ),
      ),
    );
  }
}

在这里，您可以看到有两个不同的页面/路由/屏幕，并且每个页面都有自己的Scaffold。我们通过使用Navigator来来回导航，因此我们的页面被添加到堆栈中，一个Scaffold叠加在另一个上面。这很好。

如果晚些时候进行导航，是否意味着公共的AppBar和BottomBar会在每次导航时重新渲染？

是的，但这正是我们制作两个独立屏幕（每个屏幕都有自己的Scaffold）时想要的结果。

在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，可以看到第二个应用栏被绘制在第一个应用栏的下面。对于选项卡或嵌套导航来说，这不是最好的方法。如果您想在Scaffold的主体内进行导航，并根据内容更改应用栏，则最好使用TabControllers，例如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，因为我们只处理了一个屏幕。只是碰巧我们想显示内容页面并在Scaffold的主体内导航。

结论

作为一个经验法则：每个Route/屏幕只使用一个Scaffold。对于像TabController或IndexedStack这样的小部件，在单个屏幕的主体内导航时只使用一个Scaffold。