时间戳

首页 > 解决方案 > Flutter 应用程序中每个页面的多个脚手架

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

问题描述

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

Scaffold 被设计为 MaterialApp 的单个顶级容器，通常不需要嵌套脚手架。例如，在选项卡式 UI 中，bottomNavigationBar 是 TabBar，body 是 TabBarView，您可能很想使每个选项卡栏视图成为具有不同标题 AppBar 的支架。最好为更新 AppBar 的 TabController 添加一个监听器。

这是否意味着Material App下只需要一个Scaffold或每个页面只有一个父Scaffold。如果是第一个，我们如何导航？如果它是稍后的，这是否意味着常见AppBar并BottomBar在每个导航上重新呈现？什么是最佳做法。

标签： androidflutternavigationmaterial-designscaffolding

解决方案

这意味着，通常Scaffold每个页面都应该有一个（更准确地说，每个Route/screen 应该有一个），并且您不应该嵌套Scaffolds。

在屏幕之间导航

例如，看一下可以在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!'),
        ),
      ),
    );
  }
}

在这里，您可以看到有两个不同的 pages/ Routes/screens，每个都有自己的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: () {},
          ),
        ),
      ),
    );
  }
}

在这里，我们嵌套了两个Scaffolds，如您所见，第二个应用栏被绘制在第一个应用栏下方。这不是选项卡式或嵌套导航的最佳方法。如果要在 a 的主体内导航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.

结论

作为一般经验法则：Scaffold每个Route/screen 只使用一个。仅将一个Scaffold与小部件一起使用，例如TabController或IndexedStack来导航单个屏幕主体内的内容。

推荐阅读