Flutter自适应UI插件adaptic的使用

Flutter自适应UI插件adaptic的使用

Adaptive 插件简介

adaptive 包提供了一组用于快速编写跨平台和屏幕自适应代码的小部件和函数。通过使用此包，您可以避免在不同平台和屏幕尺寸下使用 if 判断语句或 MediaQuery。

功能特性

  • 开发者可以在 AdaptiveData 小部件中定义自己的断点。
  • 通用函数可以根据断点或平台返回相应的值。

开始使用

安装与导入

  1. 在 pubspec.yaml 文件中添加依赖：

    dependencies:
  adaptive: ^版本号

  2. 导入包：

    import 'package:adaptive/adaptive.dart';

  3. 在应用树的任何位置添加 AdaptiveData 小部件。

使用示例

添加 AdaptiveData

Widget build(BuildContext context) {
  return AdaptiveData(
    smallScreenBreakpoint: 480, // 小屏幕断点
    mediumScreenBreakpoint: 768, // 中等屏幕断点
    largeScreenBreakpoint: 1024, // 大屏幕断点
    child: Scaffold(
      body: Container(),
    ),
  );
}

使用 AdaptiveIfScreen

AdaptiveIfScreen 可以根据屏幕大小返回不同的值。以下是一个示例：

AdaptiveIfScreen<Widget>(
  context: context,
  ifNotSpecified: listView(), // 如果屏幕尺寸小于中等或小屏幕断点，则使用此作为默认值
  ifLarge: Row(
    children: [
      Expanded(
        flex: 50,
        child: listView(),
      ),
      Expanded(
        flex: 50,
        child: SampleItemDetailsView(),
      ),
    ],
  ),
),

使用 AdaptiveIfScreen 设置内边距

Center(
  child: Padding(
    padding: AdaptiveIfScreen(
      context: context,
      ifNotSpecified: EdgeInsets.all(10), // 默认内边距
      ifLarge: EdgeInsets.all(20), // 大屏幕时的内边距
      ifMedium: EdgeInsets.all(15), // 中等屏幕时的内边距
      ifSmall: EdgeInsets.all(10), // 小屏幕时的内边距
    ),
    child: Text('更多信息在这里'),
  ),
),

更多关于Flutter自适应UI插件adaptic的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自适应UI插件adaptic的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Adaptic 是一个用于 Flutter 的自适应 UI 插件，它可以帮助开发者根据不同的屏幕尺寸和设备类型来调整 UI 布局。通过 Adaptic，你可以轻松地创建响应式布局，确保你的应用在各种设备上都能有良好的用户体验。

安装 Adaptic

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

dependencies:
  flutter:
    sdk: flutter
  adaptic: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 Adaptic

Adaptic 提供了多种工具来帮助你创建自适应 UI。以下是一些常见的用法：

1. 使用 Adaptic 的 AdapticBuilder

AdapticBuilder 是一个 Widget，它可以根据屏幕尺寸和设备类型来构建不同的 UI。

import 'package:flutter/material.dart';
import 'package:adaptic/adaptic.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptic Example'),
      ),
      body: AdapticBuilder(
        builder: (context, screenType) {
          if (screenType == ScreenType.small) {
            return Center(child: Text('This is a small screen'));
          } else if (screenType == ScreenType.medium) {
            return Center(child: Text('This is a medium screen'));
          } else {
            return Center(child: Text('This is a large screen'));
          }
        },
      ),
    );
  }
}

2. 使用 Adaptic 的 AdapticValue

AdapticValue 允许你根据屏幕尺寸设置不同的值。例如，你可以为不同的屏幕尺寸设置不同的字体大小、边距等。

import 'package:flutter/material.dart';
import 'package:adaptic/adaptic.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptic Example'),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(
            fontSize: AdapticValue(
              context,
              small: 14.0,
              medium: 18.0,
              large: 24.0,
            ),
          ),
        ),
      ),
    );
  }
}

3. 使用 Adaptic 的 AdapticLayout

AdapticLayout 允许你根据屏幕尺寸设置不同的布局。例如，你可以在小屏幕上使用单列布局，在大屏幕上使用多列布局。

import 'package:flutter/material.dart';
import 'package:adaptic/adaptic.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Adaptic Example'),
      ),
      body: AdapticLayout(
        small: ListView(
          children: [
            ListTile(title: Text('Item 1')),
            ListTile(title: Text('Item 2')),
            ListTile(title: Text('Item 3')),
          ],
        ),
        medium: GridView.count(
          crossAxisCount: 2,
          children: [
            Card(child: Center(child: Text('Item 1'))),
            Card(child: Center(child: Text('Item 2'))),
            Card(child: Center(child: Text('Item 3'))),
          ],
        ),
        large: GridView.count(
          crossAxisCount: 3,
          children: [
            Card(child: Center(child: Text('Item 1'))),
            Card(child: Center(child: Text('Item 2'))),
            Card(child: Center(child: Text('Item 3'))),
          ],
        ),
      ),
    );
  }
}
回到顶部