reFlutter ui布局

Question

我有一个带有bottomNavigationBar，appBar等的Flutter应用程序，我也需要进行导航。是否可以在Web开发人员中执行类似布局的操作，而不是在每个页面上都使用Scaffold？“因为我不想在每个屏幕上绘制底部导航。

这种方式不起作用

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('f'),
        ),
        bottomNavigationBar: BottomBar(),
        body: Com(),
      ),
    );

class Com extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text('go'),
      onPressed: () => {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(
              builder: (context) => Cam()),
        )
      },
    );
  }
}

class Cam extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text('Cam');
  }

}

它以一种很好的方式呈现了一个按钮，但是当我使用导航后，布局崩溃，并且我只在黑屏上看到文本

Answer 1

解决此问题的方法是，仅使用小部件树中高处的一个脚手架，只需更改下面的小部件，特别是在Scaffold body：参数中。

例如，在下面的代码中，MyApp始终相同（它是无状态的），并且始终显示相同的支架...但是，MyHomePage是有状态的，并显示在支架主体中。

因此，如果我将所有更改都保留在MyHomePage小部件及其以下，则不必在每个屏幕上都重新创建底部导航栏...只需重新创建一个。：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
        title: Text("your title here"),
        body: Center(
        child: MyHomePage(),
        bottomNavigationBar: BottomNavigationBar(your navbar here)
      ), // Scaffold
   ), //Material App
 } //build method

} //无状态小部件

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  . . .