0

我是 Flutter 的新手。

我有个问题

如何在颤动中调用布局？

我一直在创建一些包含很多小部件的布局。如果我将每个代码都放在一个文件中，这是不对的。所以我决定将小部件的代码放在每 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,
        )
      ],
    );
  }
}

太感谢了

4

1 回答 1

1

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

使用“起源”页面导入您的“命运”页面import：

    import 'package:myproject/myPageScreen.dart';

Flutter 提供 3 个选项：

  1. 使用导航器：
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) =>
          SecondPage(data: 'Hello there from the first page!'),
    ),
  1. 使用命名路由：

声明你的路线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,
        ),
      );
    }

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

于 2019-05-03T03:35:35.080 回答