使用Fluro實現Flutter介面跳轉

2021-10-08 03:17:12 字數 1807 閱讀 6457

說明

整個練習總共就下面就四個檔案,因為dart的靜態變數不知道啥原因取不到值。所以這裡參考示例將路由的配置單獨拎出個檔案。

檔名作用

main.dart

用來啟動程式和初始化路由配置

page_one.dart

第乙個介面

page_two.dart

第二個介面

routes.dart

路由的配置類

配置路由

在routes.dart檔案中配置路由,這裡需要注意的事首頁一定要用「/」配置,其它頁無所謂。

import 'package:fluro/fluro.dart';

import 'package:ui_test_no4/page_one.dart';

import 'package:ui_test_no4/page_two.dart';

class routes ));

routes.router = router;

}}

router.define作用相當於註冊頁面,這個方法有兩個引數:

引數作用

routepath

相當於跳轉的鏈結

handler

用來獲取傳參和建立介面

在上面配置路由的**中,有這麼一段**var message = params[『message』]?.first;,這塊是固定寫法,取引數就這麼取就對了。這個**在練習裡的作用就是,第乙個介面傳遞乙個引數名為message的引數給第二個介面。

設定第乙個介面

這個介面用來傳遞乙個值給第二個介面,當從第二個介面返回時顯示回傳值。page_one.dart中的**如下:

import 'package:fluro/fluro.dart';

import 'package:flutter/material.dart';

import 'package:ui_test_no4/routes.dart';

import 'dart:convert';

///第乙個介面

class page1 extends statefulwidget

class page1state extends state

///跳轉到第二個介面

intentto(buildcontext context) ?message=$json',//跳轉路徑

transition: transitiontype.infromright//過場效果

).then((result)

});}}

跳轉這很容易理解,請看intentto這個方法。為了看的清晰我把跳轉的功能**單獨放到了這個方法中。引數轉碼的原因是這個庫在拼接鏈結的時候不支援中文字元(除了數字字母挺多都不支援)。

設定第二個介面

import 'package:flutter/material.dart';

import 'dart:convert';

///第二個介面

class page2 extends statelesswidget

}

設定啟動

在主函式初始化路由的配置。main.dart**如下:

import 'package:flutter/material.dart';

import 'package:fluro/fluro.dart';

import 'package:ui_test_no4/routes.dart';

///啟動

void main()

flutter 學習記錄fluro的使用

學習flutter已經有兩個月了,也算是對flutter有點了解。今天來記錄一下flutter fluro路由管理的使用 1.引入fluro 在pubspec.yaml檔案裡,直接註冊版本依賴,如下。注意要最新版 dependencies fluro 1.6.3 專案詳情頁 handler deta...

一步一步實現Windows下Flutter環境安裝

配置環境變數 另外將如下環境變數加入到使用者環境變數中,如果不進行這一步,後續會有問題 export pub hosted url export flutter storage base url 如下圖 進入控制台檢測flutter依賴 在cmd視窗執行 flutter doctor檢查任何依賴是否...

使用Apache HTTPServer實現負載均衡

採用http 模式配置方法 修改conf目錄下的httpd.conf檔案 第一步 載入module loadmodule proxy module modules mod proxy.so loadmodule proxy balancer module modules mod proxy bala...