[Flutter] 입문 10 - 경로

4111 단어 Flutter
길 은 이러한 데이터 구 조 를 이용 하여 페이지 를 저장 하 는 것 이다. 루트 페이지 는 쌓 인 맨 아래 에 있 고 새로 온 페이지 는 위 에 놓 여 있 으 며 이전 페이지 로 돌아 가면 맨 위의 페이지 를 없앤다.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.redAccent),
      home: MyHome(0,'home'),
    );
  }
}

class MyHome extends StatelessWidget {
  int _layerIndex;
  String _context;
  MyHome(this._layerIndex,this._context);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('layerIndex _$_context _$_layerIndex'),
      ),
      body: Container(
        alignment: Alignment(0, 0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlatButton(
              child: Text('page01'),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext context) => MyPage(_layerIndex,'page01')));
              },
            ),
            FlatButton(
              child: Text('page02'),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext context) => MyPage(_layerIndex,'page02')));
              },
            )
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget {
  int _layerIndex;
  String _context;
  MyPage(this._layerIndex,this._context);
  @override
  Widget build(BuildContext context) {
    return Scaffold(     
      body: MyHome(++_layerIndex,_context),
    );
  }
}

코드 로 되 돌아 가기
Navigator.pop(context);

이름 으로 경로 진행
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.redAccent),
      home: MyHome('home'),
      routes: {
        '/page01': (context) => MyPage('page01'),
        '/page02': (context) => MyPage('page02'),
      },
    );
  }
}

class MyHome extends StatelessWidget {
  String _context;
  MyHome(this._context);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('layerIndex _$_context'),
      ),
      body: Container(
        alignment: Alignment(0, 0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlatButton(
              child: Text('page01'),
              onPressed: () {
                Navigator.pushNamed(context, '/page01');
              },
            ),
            FlatButton(
              child: Text('page02'),
              onPressed: () {
                Navigator.pushNamed(context, '/page01');
              },
            )
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget {
  String _context;
  MyPage(this._context);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MyHome(_context),
    );
  }
}
  • MaterialApp 에서 routers 를 정의 해 야 합 니 다. 안 에는 map 집합 이 있 고 앞 에는 경로 의 name 이 있 으 며 뒤 에는 Builder 의뢰 가 있 습 니 다.
  • 경로 가 필요 할 때 Navigator. pushNamed (context, '/page 01 ') 하면 됩 니 다.

  • 초기 경로 사용
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData(primaryColor: Colors.redAccent),      
          initialRoute: '/',
          routes: {
            '/':(context) => MyHome('home'),
            'page01': (context) => MyPage('page01'),
            '/page02': (context) => MyPage('page02'),
          },
        );
      }
    }

    좋은 웹페이지 즐겨찾기