如何在Flutter中调用布局?

时间:2019-05-03 02:23:31

标签: android function layout flutter routes

我是Flutter的新手。

我有一个问题

如何快速调用布局?

我已经创建了一些包含很多小部件的布局。 如果将每个代码都放在1个文件中是不对的。 所以我决定将小部件的代码放入每个1个布局文件中。

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

我的意思是,如果我按此按钮(即page1.dart),则会出现page1.dart。 认为文件(page1.dart)位于其他目录(不在lib dir内)。

我不知道。我应该使用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,
        )
      ],
    );
  }
}

非常感谢

1 个答案:

答案 0 :(得分:1)

您可以使用所需的任何名称(通常,我们见过product { 'name' : 'Backpack', 'color' : 'Blue', 'id' : 101, 'is_in_stock' : 'true' 'image_url' : { 'link_1' : 'url', 'link_2' : 'url2' } } product { 'name' : 'Backpack', 'color' : 'Red', 'id' : 102, 'is_in_stock' : 'true' 'image_url' : { 'link_1' : 'url', 'link_2' : 'url2' } } product { 'name' : 'Backpack', 'color' : 'Green', 'id' : 103, 'is_in_stock' : 'true' 'image_url' : { 'link_1' : 'url', 'link_2' : 'url2' } } import pandas as pd import numpy as np np.random.seed(100) test_df = pd.DataFrame({ 'group': ['A'] * 5 + ['B'] * 5, 'value': np.random.randint(1,100,10) }) def retain_quantile(df, percentile=0.95): percentile_val = df['value'].quantile(percentile) return df[df['value'] <= percentile_val] grouped_df = test_df.groupby('group').apply(retain_quantile) grouped_df group value group A 0 A 9 1 A 25 2 A 68 4 A 80 B 5 B 49 6 B 11 7 B 95 8 B 53 ,但这完全取决于您)。

使用xxxScreen.dart在“来源”页面中导入“命运”页面:

xxxPage.dart

Flutter提供3个选项:

  1. 使用Navigator
import
  1. 使用Named条路线:

声明您在 import 'package:myproject/myPageScreen.dart'; 中的路线:

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

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

MaterialApp
  1. 使用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(), }, );

在您的onPressed: () { Navigator.pushNamed(context, '/second'); } 上声明此属性:

onGenerateRoute

并创建您的路由生成器

MaterialApp

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