Flutter屏幕导航插件screen_go的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter屏幕导航插件screen_go的使用

简介

Screen Go 是一个帮助开发者轻松创建响应式UI的Flutter插件。它通过提供辅助小部件和扩展，简化了响应式布局的实现。

Responsive Image

目录

安装 ⬇️

要使用Screen Go，请在pubspec.yaml文件中添加依赖：

dependencies:
  screen_go:

使用 💻

导入包

确保在你的Dart文件中导入Screen Go包：

import 'package:screen_go/screen_go.dart';

包裹MaterialApp

为了使整个应用程序具有响应式特性，你可以将MaterialApp包裹在ScreenGo小部件中：

ScreenGo(
  materialApp: true,
  builder: (context, deviceInfo) {
    return MaterialApp(
      home: HomePage(),
    );
  },
);

小部件尺寸 🕓

使用.w和.h后缀来设置宽度和高度为屏幕百分比：

Container(
  width: 20.w, // 占据屏幕宽度的20%
  height: 30.5.h, // 占据屏幕高度的30.5%
)

字体大小 🆎

使用.sp后缀来根据设备像素密度和宽高比计算字体大小：

Text(
  'Screen Go', 
  style: TextStyle(fontSize: 15.sp), 
)

内边距 ⏹

同样可以使用.w和.h来设置内边距：

Padding(
  padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.w),
  child: Container(),
);

图标大小 💡

图标也可以使用.sp来调整大小：

Icon(
 Icons.home,
 size: 12.sp,
);

方向 🔄

对于需要支持横屏和竖屏的应用，可以使用otv方法或扩展：

child: Widget.otv(
  context: context,
  portrait: Container( // 竖屏时使用的组件
    width: 100.w,
    height: 20.5.h,
  ), 
  landscape: Container( // 横屏时使用的组件
    width: 100.w,
    height: 12.5.h,
  ),
)

屏幕类型 📱

获取屏幕类型并根据类型返回不同的内容：

stv(
  context: context,
  mobile: Container( // 移动端使用的组件
    width: 100.w,
    height: 20.5.h,
  ), 
  tablet: Container( // 平板使用的组件
    width: 100.w,
    height: 12.5.h,
  ),
  desktop: Container( // 桌面端使用的组件
    width: 100.w,
    height: 12.5.h,
  ),
)

响应式小部件 📱


更多关于Flutter屏幕导航插件screen_go的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter屏幕导航插件screen_go的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是关于如何在Flutter项目中使用screen_go插件进行屏幕导航的代码示例。screen_go是一个简化Flutter屏幕导航的插件，它提供了一种声明式的方式来管理路由。

首先，你需要在你的pubspec.yaml文件中添加screen_go依赖：

dependencies:
  flutter:
    sdk: flutter
  screen_go: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

接下来，配置你的路由。通常，你会在一个单独的文件中（例如routes.dart）定义所有的路由和参数。

// routes.dart
import 'package:flutter/material.dart';
import 'package:screen_go/screen_go.dart';
import 'screens/home_screen.dart';
import 'screens/detail_screen.dart';

class MyRouter {
  static var routes = <String, WidgetBuilder>{
    '/': (context) => HomeScreen(),
    '/detail': (context, {arguments}) => DetailScreen(arguments: arguments as Map<String, dynamic>),
  };

  static var navigators = <String, ScreenGoNavigator>{
    'goDetail': ScreenGoNavigator(
      fromRoutes: ['/'],
      to: '/detail',
      clearStack: false,
      transition: TransitionType.fade,
    ),
  };
}

在你的主应用文件中（通常是main.dart），你需要初始化ScreenGo并设置路由。

// main.dart
import 'package:flutter/material.dart';
import 'package:screen_go/screen_go.dart';
import 'routes.dart';

void main() {
  ScreenGo.init(
    routes: MyRouter.routes,
    navigators: MyRouter.navigators,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScreenGo.buildPage(initialRoute: '/'),
    );
  }
}

现在，在你的HomeScreen中，你可以使用ScreenGo.go方法来进行导航。

// screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:screen_go/screen_go.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScreenGo.go(
              navigator: 'goDetail',
              arguments: {'id': 123, 'title': 'Detail Title'},
            );
          },
          child: Text('Go to Detail'),
        ),
      ),
    );
  }
}

在DetailScreen中，你可以接收传递过来的参数。

// screens/detail_screen.dart
import 'package:flutter/material.dart';

class DetailScreen extends StatelessWidget {
  final Map<String, dynamic> arguments;

  DetailScreen({required this.arguments});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('ID: ${arguments['id']}'),
            Text('Title: ${arguments['title']}'),
          ],
        ),
      ),
    );
  }
}

这样，你就完成了在Flutter项目中使用screen_go插件进行屏幕导航的基本配置。这个示例展示了如何定义路由、配置导航器、以及在按钮点击时进行页面跳转并传递参数。

回到顶部