android - 如何在 flutter 中调用 Layouts？

Question

我是 Flutter 新手。

我有一个问题

如何在flutter中调用布局？

我一直在创建一些包含大量小部件的布局。如果我将每个代码都放在 1 个文件中，这是不对的。所以我决定将小部件的代码放入每 1 个布局文件中。

而且我不知道如何在我创建的 home-page.dart 中调用它们。

我的意思是，如果我按下这个(即 page1.dart)，那么 page1.dart 就会出现。认为文件 (page1.dart) 在其他目录中(不在 lib 目录中)。

我不知道。我应该使用 ROUTES 吗？但我不知道怎么办。

你愿意教我吗？

................................

这是。我的 home_page.dart 中有这样的 TabBar:

import 'package:flutter/material.dart';
import 'package:coba/second.dart';

class HomePage extends StatelessWidget {
  static String tag = 'home-page';
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      title: "MySampleApplication",
        home: new DefaultTabController(
          length: 3,
          child: new Scaffold( 
            appBar: new AppBar(
              title: new Text("Hello Flutter App"), 
              bottom: new TabBar(                 
                tabs: <Widget>[
                  new Tab(text: "First Tab"),
                  new Tab(text: "Second Tab"),
                  new Tab(text: "Third Tab"),
                ],
              ),
            ),
            body: new TabBarView( 
                children: <Widget>[
                   new Text("You've Selected First"),
                   new SecondWidget(),
                   new ThirdWidget(),
                ]
            )
          ),
        )
    );
  }
}
class SecondWidget extends StatelessWidget {   
  @override
  Widget build(BuildContext context) {
    Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) =>
              second(data: 'Hello there from the first page!'),
        ),
  }
}

class ThirdWidget extends StatelessWidget { 
  @override
  Widget build(BuildContext ctxt) {
    return new Column(
      children: <Widget>[
        Text('halooo'),
        Container(
          color: Colors.black,
          width: 200,
          height: 200,
        )
      ],
    );
  }
}

非常感谢

Answer 1

您可以使用任何您想要的名称(通常，我们已经看到了 xxxScreen.dart 或 xxxPage.dart，但这完全取决于您)。

使用 import 在“origin”页面中导入你的“destiny”页面:

    import 'package:myproject/myPageScreen.dart';

Flutter 提供了 3 个选项:

1. 使用Navigator :

    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) =>
          SecondPage(data: 'Hello there from the first page!'),
    ),

1. 使用Named路线:

在 MaterialApp 中声明你的路由:

MaterialApp(
  // Start the app with the "/" named route. In our case, the app will start
  // on the FirstScreen Widget
  initialRoute: '/',
  routes: {
    // When we navigate to the "/" route, build the FirstScreen Widget
    '/': (context) => FirstScreen(),
    // When we navigate to the "/second" route, build the SecondScreen Widget
    '/second': (context) => SecondScreen(),
  },
);

然后在 Navigator 中使用命名路由:

onPressed: () {
  Navigator.pushNamed(context, '/second');
}

1. 使用onGenerateRoute:

在您的 MaterialApp 上声明此属性:

    return MaterialApp(
      // Initially display FirstPage
      initialRoute: '/',
      onGenerateRoute: _getRoute,
    );

并创建您的路线生成器:

    final args = settings.arguments;
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(builder: (_) => 
          FirstPage());
      case '/second':
        // Validation of correct data type
        if (args is String) {
           return MaterialPageRoute(
           builder: (_) => SecondPage(
           data: args,
        ),
      );
    }

您可以将路由器创建为另一个文件，以帮助组织您的项目。