Flutter 개발 의 경로 파라미터 처리

Navigator 의 push 와 pop 방법
Navigator 네 비게 이 션 의 push 와 pop 방법 은 파 라 메 터 를 가지 고 페이지 간 에 전달 할 수 있 고 다른 변형 방법 도 마찬가지 입 니 다.pushNamed 방법 원형 은 다음 과 같 습 니 다.

Future<T?> pushNamed<T extends Object?>(
  String routeName, {
  Object? arguments,
}) {
  return push<T>(_routeNamed<T>(routeName, arguments: arguments)!);
}

routeName 의 이름 경로 외 에 도 경로 페이지 에서 인 자 를 전달 하 는 데 사용 할 선택 할 수 있 는 인자 arguments 가 있 습 니 다.pop 방법 도 마찬가지 입 니 다.

void pop<T extends Object?>([ T? result ]) {
  //...
}

result 를 가지 고 상위 페이지 로 전송 할 수 있 습 니 다.
코드 구현
우 리 는 하나의 목록 을 사용 하여 상세 한 페이지 로 넘 어가 서 매개 변 수 를 가 져 오 는 것 을 보 여 줍 니 다(목록 구축 글 은 보 세 요//www.jb51.net/article/213052.htm.목록 줄 을 클릭 할 때 목록 데이터 항목 의 id 를 가지 고 자세 한 페이지 로 이동 합 니 다.자세 한 페이지 에서 돌아 올 때 이 id 를 되 돌려 줍 니 다.목록 항목 의 Widget 에 id 속성 이 추가 되 었 습 니 다.목록 을 만 들 때 초기 화 됩 니 다.

class DynamicItem extends StatelessWidget {
  final int id;
  final String title;
  final String imageUrl;
  final int viewCount;
  static const double ITEM_HEIGHT = 100;
  static const double TITLE_HEIGHT = 80;
  static const double MARGIN_SIZE = 10;
  const DynamicItem(this.id, this.title, this.imageUrl, this.viewCount,
      {Key key})
      : super(key: key);
  //...
}

목록 의 용 기 는 이벤트 클릭 에 응답 하기 위해 Gesture Detector 소 포 를 사용 합 니 다.onTap 방법 은 async 방법 으로 정의 되 어 있 으 며,await 를 사용 하여 내 비게 이 션 이 되 돌아 올 때의 인 자 를 가 져 오고,SnackBar 를 사용 하여 되 돌아 오 는 id 를 표시 합 니 다.여기 pushNamed 는 맵 대상 을 가지 고 목록 의 id 를 상세 페이지 로 전달 합 니 다.

@override
Widget build(BuildContext context) {
  return GestureDetector(
    child: Container(
      margin: EdgeInsets.all(MARGIN_SIZE),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _imageWrapper(this.imageUrl),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _titleWrapper(context, this.title),
                _viewCountWrapper(this.viewCount.toString()),
              ],
            ),
          )
        ],
      ),
    ),
    onTap: () async {
      Map<String, dynamic> routeParams = {'id': id};
      var arguments = await Navigator.of(context)
          .pushNamed(RouterTable.dynamicDetail, arguments: routeParams);
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text("   ${(arguments as Map<String, dynamic>)['id']}  "),
      ));
    },
  );
}

여기 에는 arguments 변 수 를 사용 하여 네 비게 이 션 이 되 돌아 오 는 인 자 를 받 습 니 다.네 비게 이 션 에 되 돌아 오 는 인자 가 있 으 면 Future 대상 으로 돌아 가 await 를 사용 하면 받 을 수 있 습 니 다.그리고 as 를 실제 유형 으로 바 꾸 어 사용 합 니 다.상세 한 페이지 에서 Flutter 는 현재 컨 텍스트 에서 경로 설정 파 라 메 터 를 가 져 오 는 ModalRoute 클래스 를 제공 합 니 다.코드 는 다음 과 같 습 니 다.

class DynamicDetail extends StatelessWidget {
  const DynamicDetail({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Map<String, dynamic> routeParams =
        ModalRoute.of(context).settings?.arguments;

    return WillPopScope(
      child: Scaffold(
        appBar: AppBar(
          title: Text('    '),
          brightness: Brightness.dark,
        ),
        body: Center(
          child: Text("   id: ${routeParams['id']}"),
        ),
      ),
      onWillPop: () async {
        Navigator.of(context).pop({'id': routeParams['id']});
        return true;
      },
    );
  }
}

실제로 이 ModalRoute.of(context).settings 는 우리 의 이전 경로 가 차단 되 어 있 는 onGenerateRoute 의 settings 매개 변수 입 니 다.따라서 우리 가 추가 적 인 경로 매개 변수(예 를 들 어 전역 매개 변수)를 추가 해 야 한다 고 가정 하면 onGenerateRoute 방법 에서 경로 의 매개 변 수 를 다시 조립 할 수 있 습 니 다.여기 서 주의해 야 할 부분 이 있 습 니 다.돌아 올 때 인 자 를 휴대 해 야 하기 때문에 응답 이 벤트 를 차단 해 야 합 니 다.이 때 전체 구성 요 소 는 WillPopScope 소 포 를 사용 할 수 있 습 니 다.이 방법 은 두 개의 인 자 를 가지 고 있 습 니 다.

child:하위 구성 요소,즉 기 존의 페이지 구성 요소;

onWillPop:되 돌아 가기 전에 차단 처리 하고 Future대상 을 되 돌려 줍 니 다.false 라면 되 돌아 오지 않 습 니 다.true 라면 이전 단계 로 돌아 갑 니 다.여기 서 우 리 는 파 라 메 터 를 되 돌 릴 수 있 도록 파 라 메 터 를 가 진 pop 방법 을 호출 했다.실제로 여기 서 다른 처 리 를 하 는 경우 가 많다.예 를 들 어 양식 을 저장 하지 않 고 이 코 를 확인 하 는 지,그리고 많은 전자상거래 의 활동 페이지 에서'고통 을 참 으 며 떠 나 는 것'이나'조금 만 더 보 자'는 처 리 를 묻는다.

최종 효과
최종 실행 효 과 는 다음 그림 에서 보 듯 이 상세 페이지 에서 id 인 자 를 가 져 왔 고 돌아 올 때 도 해당 하 는 id 를 받 았 습 니 다.

이상 은 Flutter 개발 중의 경로 매개 변수 처리 에 대한 상세 한 내용 입 니 다.Flutter 경로 매개 변수 처리 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 십시오!