1. 程式人生 > 其它 >[Flutter] 表單傳值

[Flutter] 表單傳值

表單傳值

說明:
INFO頁面通過路由到DETAIL頁面,並把表單資料傳過去。
通過map傳值的方式程式碼閱讀起來困難,而且難維護,寫變數時容易出錯。
通過傳state的方法,程式碼看起來更加簡潔可讀。

STEP01

宣告要接收的變數

///DETAIL state
class DetailState{
  final String comName;
  final String peoName;
  final String occupation;
  final String keyWord;
  final String phoneNumber;
  final String resume;
  final bool isConCompany;
  final int isEducation;
  final String experience;
  final String industries;
  final String cities;
    ///命名建構函式
  DetailState(
      {required this.comName, 
       required this.peoName, 
       required this.occupation,
       required this.keyWord,
       required this.resume,
       required this.isConCompany,
       required this.isEducation,
       required this.experience,
       required this.industries,
       required this.cities,
       required this.phoneNumber});
}

STEP02

controller連線state,設定controller建構函式接收路由傳值過來的state

///DETAIL controller
DetailState state;
DetailController(this.state);

STEP03

controller例項化時接收INFO頁面傳過來的值(DetailState)

///DETAIL binding
class DetailBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut<DetailController>(
      () => DetailController(Get.arguments),
    );
  }
}

STEP04

跳轉方法裡把DetailState帶引數傳過去

/// INFO controller 
void toDetail(){
    Get.toNamed(Routes.DETAIL, arguments: DetailState(
        comName: state.comNameController.text,
        peoName: state.peoNameController.text,
        occupation: state.occupationController.text,
        keyWord:state.keyWordController.text, 
        phoneNumber: state.phoneNumberController.text,
        resume: state.resumeController.text, 
        isConCompany: state.isConCompany.value,
        isEducation: state.isEducation.value, 
        experience: state.experience.value,
        industries: state.industries.value,
        cities: state.cities.value));
  }

STEP05

view裡顯示取得的值

///DETAIL view 
Text(controller.state.industries,style: TextStyle(fontSize: 20,color: Colors.orange),)