Question

'Allo，

我的主文件最多可以包含1000行代码，我忍不住认为可以通过将Scaffold分成3或4个.dart文件来节省时间。这可能吗？

在AppBar和Drawer之间，由于所有链接和设计参数，我已经有多达500多行代码。我想讲解这段代码，而不是在研究主体时必须不断滚动浏览它。

每当我尝试取出抽屉并将其放在单独的文件中时，到处都会出错。 “动态”和“小部件”以及返回类型等问题

我可以取出支架并将其引用到另一个文件中吗？

child: new Scaffold(
  appBar: new AppBar(
    bottom: new TabBar(tabs:[.....]),
    actions: <Widget> [
      new PopupMenuButton<xx>()
      ],),],),  //end appBar
  drawer: new Drawer(......),   //end drawer
  body: TabBarView(....),   //end body
  ),  //end scaffold

我不介意将主体保留在该主文件中，但是如果我有更多选择的话，我也可能会将其删除。只是想将1000条以上的行减少为2-3块（可管理空间的文件）。

有什么想法吗？

Answer 1

最肯定有一种在不同文件之间组织此文件的方法。除了更易于维护和测试之外，如果涉及到状态，这还可以提高性能（因为如果状态更改，您必须重建整个树，而不仅仅是重建叶节点）。

但是，这也意味着，如果在一个大的build()方法中涉及到状态并分散了状态，那么在组织文件时可能还需要考虑一些其他事项。假设您将创建新的自定义小部件来包装各种组件，并且需要适当地协调状态。

因此，为了将这种构建方法分解为不同的子小部件，我建议您首先将其分解为功能：

来自：

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
        bottom: new TabBar(tabs:[.....]),
        actions: <Widget> [
        new PopupMenuButton<xx>()
        ],),],),  //end appBar

    drawer: new Drawer(......),   //end drawer

    body: TabBarView(....),   //end body
  );
}

收件人：

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: _appBar(),
    drawer: _drawer(),
    body: _body(),
  );
}

Widget _appBar() {
    return new AppBar(
        bottom: new TabBar(tabs:[.....]),
        actions: <Widget> [
        new PopupMenuButton<xx>()
        ],),],);
}

Widget _drawer() {
    ...
}

Widget _body() {
    return TabBarView();
}

这时，您可能开始意识到正在传递什么数据/状态，因为您必须在这些新的辅助方法中添加参数。

如果您传递了大量参数（尤其是在状态更改时），那么您在此答案范围之外还会有其他考虑事项（并且我们需要查看您实际处理的状态）。

下一步是为每种方法创建一个新的小部件。

发件人：

Widget _appBar() {
    return new AppBar(
        bottom: new TabBar(tabs:[.....]),
        actions: <Widget> [
        new PopupMenuButton<xx>()
        ],),],);
}

收件人：

Widget _appBar(...) {
    return MyAppBar(...);
}

class MyAppBar extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new AppBar(
        bottom: new TabBar(tabs:[.....]),
        actions: <Widget> [
        new PopupMenuButton<xx>()
        ],),],);
    }
}

您可以在自己的文件中定义MyAppBar。

您还可以绕过_appBar(...)方法，而只需在主build()方法中构造新的小部件（假设您没有其他复杂的设置）：

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: MyAppBar(),
    drawer: MyDrawer(),
    body: _body(), // you might want to keep the body in the same file
  );
}

Answer 2

最简单的方法是方法：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: _buildAppBar(),
    ...
  );
}

Widget _buildAppBar() {
  return AppBar(...);
}

您还可以使用单独的小部件。 appBar插槽中的小部件必须实现PreferredSizeWidget：

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(),
      body: MyBody(),
    );
  }
}

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight); // whatever height you want

  @override
  Widget build(BuildContext context) {
    return AppBar();
  }
}

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

当然，如果将它们放置在其他文件中，则必须将其导入：

import 'package:myapp/widgets/some_widget.dart';

将主Flutter支架（AppBar + TabBar + PopupMenu，抽屉，主体）分布在单独的较小文件上吗？

2 个答案: