flutter07 - 라우팅

기타 2020-03-17 17:22:36 독서 시간: null

새로운 경로를 엽니 다

TipRoute 들어오는 텍스트에 대한 책임, 매개 변수 프롬프트 텍스트를 취하는 경로를 생성 우리는 "뒤로"버튼을 추가 TipRoute 또한, 반환 매개 변수를 가져올 것이다 동시에 경로의 반환을 클릭, 페이지에 표시

import 'package:flutter/material.dart'; //导包

//应用入口
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我是标题',
      theme: ThemeData(
        primarySwatch: Colors.blue,//蓝色主题
      ),
      home: MyHomePage(title: '我是HomePager标题名字'),
    );
  }
}

//首页,继承自有状态组件
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '点击进行累加~',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            FlatButton(
              child: Text("打开新的路由"),
              textColor: Colors.blue,
              onPressed: (){
                //导航到新的路由
                Navigator.push(context,MaterialPageRoute(builder: (context){
                  return NewRoute();
                }));
              },
            ),
            FlatButton(
              child: Text("打开新的路由2"),
              textColor: Colors.amber,
              onPressed: (){
                //导航到第二个路由
                Navigator.push(context, MaterialPageRoute(builder: (context){
                  return NewRoute2();

                }));
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class NewRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("new Route"),
      ),
      body: Center(
        child: Text("This is new Route"),
      ),
    );
  }
}

class NewRoute2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("第二个页面"),
      ),
      body: Center(
        child: Text("第二个页面的内容"),
      ),
    );
  }
}

MaterialPageRoute

  MaterialPageRoute({
    WidgetBuilder builder,
    RouteSettings settings,
    bool maintainState = true,
    bool fullscreenDialog = false,
  })
  • builder유형 콜백 함수입니다 WidgetBuilder, 그 역할은 빌드 특정 콘텐츠에 대한 경로 페이지 인 경우, 반환 값은 위젯입니다. 우리는 일반적으로이 콜백 반환에게 새로운 경로의 인스턴스를 달성하고자합니다.
  • settings 이러한 경로 이름으로 라우팅 구성 정보를 포함합니다 초기 라우팅 (홈) 경우.
  • maintainState: 당신이 쓸모없는 라우팅시 점유하는 모든 리소스를 해제 할 경우 새 라우팅 스택이 원래 경로가 여전히 메모리에 저장됩니다 기본적으로, 그것은 설정할 수 있습니다 maintainStatefalse로.
  • fullscreenDialog이 페이지는 새로운 경로 경우 전체 화면 모달 대화, 아이폰 OS에 있는지 여부를 나타내는 fullscreenDialog이며 true, 새 페이지는 (오히려 수평보다) 화면의 바닥에서 미끄러됩니다가.

항해자

두 가지 방법 :

미래 푸시 (BuildContext 컨텍스트 루트 경로)

라우팅 스택 (즉, 새로운 페이지를 열), 리턴 값은 감안할 Future대상 데이터 스택 (즉, 닫힘)를 수용하기위한 새로운 경로를 반환한다.

불리언 팝 (BuildContext 콘텍스트 [결과])

라우팅 스택 (즉, 새로운 페이지를 열), 리턴 값은 감안할 Future대상 데이터 스택 (즉, 닫힘)를 수용하기위한 새로운 경로를 반환한다.

실행 순서를 라우팅 네비게이터 initialRoute를 찾고 -> onGenerateRoute -> onUnknownRoute

라우팅 스택 (즉, 새로운 페이지를 열), 리턴 값은 감안할 Future대상 데이터 스택 (즉, 닫힘)를 수용하기위한 새로운 경로를 반환한다.

Navigator.push (BuildContext 컨텍스트 루트 경로) 等价 于 Navigator.of (컨텍스트) .push (루트 경로)

값을 기준으로 경로

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "页面1",
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("页面1"),
        ),
        body: GiveRoute(),
      ),
    );
  }
}

class GiveRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () async {
          //打开新页面,并且等待返回结果
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return TipRoute(
                  text: "我是传递给TipRoute的文本",
                );
              },
            ),
          );
          print("路由的返回数据为$result");
        },
        child: Text("打开提示页面"),
      ),
    );
  }
}

/**
 * 返回数据的
 */
class TipRoute extends StatelessWidget {
  final String text;

  TipRoute({Key key, @required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("提示信息"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Column(
          children: <Widget>[
            Text(text),
            RaisedButton(
              onPressed: () => Navigator.pop(context, "我是返回值"),
              child: Text("返回"),
            ),
          ],
        ),
      ),
    );
  }
}

패스 경로에 2 함수 값을 구성하여

Navigator.pop에 의해 두 번째 경로 (문맥, "나는 반환 값입니다"), 라우트의 전통적 가치로 돌아가

경로는 먼저 다음 코드로받을

 return Center(
      child: RaisedButton(
        onPressed: () async {
          //打开新页面,并且等待返回结果
          var result = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return TipRoute(
                  text: "我是传递给TipRoute的文本",
                );
              },
            ),
          );
          print("路由的返回数据为$result");
        },
        child: Text("打开提示页面"),
      ),
    );

명명 된 경로

경로의 이름 (경로 명명 된) "명명 된 경로"

라우팅 테이블

응용 프로그램이되는 구성 요소를 라우팅하는 이름의 대응을 알 수 있도록라는 이름의 경로를 사용하려면, 우리는 먼저, 등록 및 라우팅 테이블 (라우팅 테이블)을 제공해야합니다. 사실, 라우팅 테이블을 정의하는 라우팅 테이블로 다음되고, 경로에 이름을 등록 :

Map<String, WidgetBuilder> routes;

그것은 인 Map문자열 인 경로를 들어, 키 이름, 값 A는 builder대응하는 라우팅 위젯을 생성하기위한 콜백 함수.

에 대응 라우팅 테이블 이름으로 검색 라우팅 WidgetBuilder콜백 함수, 다음 콜백 함수 세대 위젯 및 반환 경로를 호출합니다.

라는 이름의 경로를 사용하여

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "路由表 - 命名路由",
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      routes: {
        "/": (context) => HomeDemo(title: "主页"), //使用命名路由 注册首页路由
        "new_page1": (context) => PageRoutes1(),
        "new_page2": (context) => PageRoutes2(),
      },
    );
  }
}

class HomeDemo extends StatelessWidget {
  String title;

  HomeDemo({Key key, @required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("主页"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Navigator.pushNamed(context, "new_page1");
              },
              child: Text("通过命名路由方式跳转到page1"),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pushNamed(context, "new_page2");
              },
              child: Text("通过命名路由方式跳转到page2"),
            ),
          ],
        ),
      ),
    );
  }
}

class PageRoutes1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("页面一"),
      ),
    );
  }
}

class PageRoutes2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("页面二"),
      ),
    );
  }
}

라우팅 레지스트리 홈 이름을 지정하여

routes: {
  "/": (context) => HomeDemo(title: "主页"), //使用命名路由 注册首页路由
  "new_page1": (context) => PageRoutes1(),
  "new_page2": (context) => PageRoutes2(),
},

명명 된 노선들은 매개 변수를 전달

import 'package:first_flutter_app/main.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "命名路由传递参数",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/": (context) => HomeDemo(),
        "newpage": (context) => NewPageRoute(),
      },
    );
  }
}

class HomeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("命名路由传递参数"),
        backgroundColor: Colors.amberAccent,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.of(context).pushNamed("newpage", arguments: "项目ID1234");
          },
          child: Text("命名路由 传递函数"),
        ),
      ),
    );
  }
}

class NewPageRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var args = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text("NewPageRoute"),
        backgroundColor: Colors.amberAccent,
      ),
      body: Center(
        child: Text("命名路由接受到的参数:$args"),
      ),
    );
  }
}

어떤이 이름을 지정하지 않고 건설 구조를 라우팅하는

import 'package:first_flutter_app/main.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "命名路由传递参数",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/": (context) => HomeDemo(),
        "newpage": (context) => NewPageRoute(), //无构造的
        "tiproute": (context) =>
            TipRoute(text: ModalRoute.of(context).settings.arguments), //有构造的
      },
    );
  }
}

class HomeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("命名路由传递参数"),
        backgroundColor: Colors.amberAccent,
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Navigator.of(context)
                    .pushNamed("newpage", arguments: "项目ID1234");
              },
              child: Text("命名路由无构造的 传递函数"),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.of(context)
                    .pushNamed("tiproute", arguments: "你好,我是flutter命名函数传值");
              },
              child: Text("命名路由有构造的 传递函数"),
            )
          ],
        ),
      ),
    );
  }
}

/**
 * 无构造的
 */
class NewPageRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var args = ModalRoute.of(context).settings.arguments;//本行是接受参数

    return Scaffold(
      appBar: AppBar(
        title: Text("NewPageRoute"),
        backgroundColor: Colors.amberAccent,
      ),
      body: Center(
        child: Text("命名路由接受到的参数:$args"),
      ),
    );
  }
}

/**
 * 有构造的
 */
class TipRoute extends StatelessWidget {
  final String text; //用来接受传过来的信息

  TipRoute({Key key, @required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("提示信息"),
      ),
      body: Padding(
        padding: EdgeInsets.all(18),
        child: Column(
          children: <Widget>[
            Text(text),
            RaisedButton(
              onPressed: () => Navigator.pop(context, "我是返回值"),
              child: Text("返回"),
            ),
          ],
        ),
      ),
    );
  }
}

경로 생성 후크

바이 onGenerateRoute()컴포넌트에 함수 파라미터 추출 및 패스 파라미터

사용자가 등을 저장, 상품의 정보를 볼 수에 기록되지만 트랜잭션 후, 카트 쇼핑, 사용자의 개인 정보와 다른 페이지가 시계에 로그인 할 필요가있는 전기 공급 업체 APP의 개발. 위의 기능을 달성하기 위해, 우리는 각 페이지를 라우팅하기 전에 열려있는 상태에서 사용자가 로그인을 결정해야합니다! 우리 전에 모든 경로 연중 필요성은 매우 귀찮은 일 무슨 결정합니다.

MaterialApp는이 명명 된 경로를 열 때 호출 할 수 있습니다하는 onGenerateRoute 속성이

당신이 Navigator.pushNamed를 호출 할 때 (...) 경우 명명 된 경로를 열 수 있기 때문에 그 이유는 이유있다 , 지정된 경로 이름이 이미 라우팅 테이블에 등록되어 테이블 빌더를 라우팅하는 구성 요소 호출을 라우팅 생성하는 기능을합니다, 라우팅 테이블 경우 그것은 onGenerateRoute를 호출, 등록되지 않은 경로를 생성 할 수 있습니다.

onGenerateRoute서명 콜백은 다음과 같습니다 :

Route<dynamic> Function(RouteSettings settings)

MaterialApp(
  ... //省略无关代码
  onGenerateRoute:(RouteSettings settings){
      return MaterialPageRoute(builder: (context){
           String routeName = settings.name;
       // 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由，
       // 引导用户登录；其它情况则正常打开路由。
     }
   );
  }
);
이순신 닫아 산
게시 49 개 원래 기사 · 원 찬양 6 ·은 80000 +를 볼
개인 편지 우려

추천

출처blog.csdn.net/zlhyy666666/article/details/104887105
추천
행
.netcoreapi 컨테이너와 컨테이너의 MySQL을 고정 표시기-구성
com.google.firebase.database.DatabaseException는 : 롱 타입 java.lang.String의 값을 변환하는 데 실패
국내 휴대전화 왕이 미국 통신사 시장 1위를 차지했지만 국내 휴대전화 4위는 아니다.
트랜잭션 격리 수준의 네 가지
오늘 chatgpt 시도
부하 분산
【FFMpeg】源码编译
우분투 sudo를 무료로 접착
자바 8 스트림 API - 어떤 상태 중간 동작을 보증 새로운 소스 수집합니까?
CF161BDiscounts
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com