0
点赞
收藏
分享

微信扫一扫

轻松flutter之 设备查询、媒体查询、横竖屏

90哦吼 2021-10-04 阅读 23

一、设备查询 Platform

dart:io库中提供了Platform类用于进行设备查询具体使用方法如下:

  • 引入dart:io
  • 使用Platform.XXX属性进行查询
  • 具体属性见例程
import 'package:flutter/material.dart';
import 'dart:io'; //引入dart:io库

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Device Info'),
        ),
        body: FirstWidget(),
      ),
    );
  }
}

class FirstWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //直接利用dart:io中提供的属性进行设备查询
        Text("操作系统:${Platform.operatingSystem}"),
        Text("操作系统版本:${Platform.operatingSystemVersion}"),
        Text("本地主机名localHostname:${Platform.localHostname}"),
        Text("是否是Android平台:${Platform.isAndroid}"),
        Text("是否是IOS平台:${Platform.isIOS}"),
        Text("是否是Linux平台:${Platform.isLinux}"),
        Text("是否是MacOS平台:${Platform.isMacOS}"),
        Text("是否是Windows平台:${Platform.isWindows}"),
        Text("是否是Fuchsia平台:${Platform.isFuchsia}"),
        Text("CPU内核数量:${Platform.numberOfProcessors}"),
        Text("当前区域设置的名称:${Platform.localeName}"),
        Text("版本:${Platform.version}"),
        Expanded(
          child: Text("环境:${Platform.environment}"),
        ),
     ],
    );
  }
}

二、媒体查询 MediaQuery

flutter提供了MediaQuery.of(context)对象进行媒体查询, 具体使用方法查考下述例程:

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Device Info'),
        ),
        body: FirstWidget(),
      ),
    );
  }
}

class FirstWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text("设备像素逻辑像素sp大小:${MediaQuery.of(context).size}"),//Size类型
        Text("设备像素逻辑像素sp大小:${MediaQuery.of(context).padding}"),
        Text("每个逻辑像素的设备像素数:${MediaQuery.of(context).devicePixelRatio}"),
        Text("每个逻辑像素的字体像素数:${MediaQuery.of(context).textScaleFactor}"),
        Text("格式化时间时是否使用24小时格式:${MediaQuery.of(context).alwaysUse24HourFormat}"),
        Text("是横屏还是竖屏:${MediaQuery.of(context).orientation}"),
        Text("设备的亮度模式:${MediaQuery.of(context).platformBrightness}"),
        Text("被系统遮挡的部分(通常指键盘):${MediaQuery.of(context).viewInsets}"),
        Text("被系统遮挡的部分(常指“刘海屏”或系统状态栏):${MediaQuery.of(context).padding}"),
        Text("当前窗口的宽度和高度:${MediaQuery.of(context).systemGestureInsets}"),
        Text("当前窗口的宽度和高度:${MediaQuery.of(context).textScaleFactor}"),
      ],
    );
  }
}

三、flutter禁止横屏

import 'package:flutter/services.dart';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(new MyApp());
  });
}
举报

相关推荐

媒体查询?

媒体查询~~~~~

前端之媒体查询入门

媒体查询教案

~107媒体查询

设置媒体查询

浅谈媒体查询

0 条评论