Flutter自适应布局插件adaptive_container的使用

Flutter自适应布局插件adaptive_container的使用

Adaptive Container

adaptive_container 是一个在 Flutter 中用于实现类似 Bootstrap 响应式布局行为的包。

全宽度视图

宽度调整为<1200

宽度调整为<900

宽度调整为<650

如何使用

要使用 AdaptiveContainer，你需要：

  1. 将 AdaptiveContainer 包装在一个具有尺寸的容器中。
  2. 定义视图的类型，默认视图类型为 AdapType.ADA_2。

AdapTypes

  • AdapType.ADA_2 - 默认视图类型，表示在最大宽度下有2行视图。
  • AdapType.ADA_3 - 在最大宽度下有3行视图。
  • AdapType.ADA_4 - 在最大宽度下有4行视图。
  • AdapType.ADA_5 - 在最大宽度下有5行视图。

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: AdaptiveContainer(
              type: AdapType.ADA_5, // 设置视图类型为5行
              children: [
                AdaptiveItem(
                    height: 200, // 设置每个项目的高度
                    bgColor: Colors.blue, // 设置背景颜色
                    content: Center(
                      child: Text(
                        "TEST R 1", // 文本内容
                        style: Theme.of(context).textTheme.headline4, // 设置文本样式
                      ),
                    )),
                AdaptiveItem(
                    height: 200,
                    bgColor: Colors.red,
                    content: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Text(
                          "TEST R 2",
                          style: Theme.of(context).textTheme.headline4,
                        ),
                      ),
                    )),
                AdaptiveItem(
                    height: 200,
                    bgColor: Colors.yellow,
                    content: Center(
                      child: Text(
                        "TEST R 3",
                        style: Theme.of(context).textTheme.headline4,
                      ),
                    )),
                AdaptiveItem(
                    height: 200,
                    bgColor: Colors.green,
                    content: Center(
                      child: Text(
                        "TEST R 4",
                        style: Theme.of(context).textTheme.headline4,
                      ),
                    )),
                AdaptiveItem(
                    height: 200,
                    bgColor: Colors.purple,
                    content: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Text(
                          "TEST R 5",
                          style: Theme.of(context).textTheme.headline4,
                        ),
                      ),
                    )),
              ],
            )));
  }
}

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

1 回复

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


adaptive_container 是一个 Flutter 插件，旨在帮助开发者轻松创建自适应布局。它允许你根据不同的屏幕尺寸、设备方向或其他条件动态调整容器的大小和样式。这个插件特别适合需要在多种设备上（如手机、平板、桌面）良好显示的应用。

安装

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

dependencies:
  flutter:
    sdk: flutter
  adaptive_container: ^1.0.0  # 请检查最新版本

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

基本用法

adaptive_container 的核心是 AdaptiveContainer 组件，它可以根据不同的条件（如屏幕宽度、设备类型等）动态调整容器的大小、边距、内边距等属性。

以下是一个简单的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Adaptive Container Example')),
        body: Center(
          child: AdaptiveContainer(
            width: 300,  // 默认宽度
            height: 200, // 默认高度
            color: Colors.blue,
            child: Center(child: Text('Hello, Adaptive Container!')),
            adaptiveWidth: (context) {
              // 根据屏幕宽度动态调整宽度
              if (MediaQuery.of(context).size.width < 600) {
                return 200;  // 小屏幕
              } else {
                return 400;  // 大屏幕
              }
            },
          ),
        ),
      ),
    );
  }
}

主要属性

  • width 和 height: 容器的默认宽度和高度。
  • color: 容器的背景颜色。
  • child: 容器中的子组件。
  • adaptiveWidth 和 adaptiveHeight: 回调函数，用于根据条件动态调整容器的宽度和高度。
  • adaptiveMargin 和 adaptivePadding: 回调函数，用于根据条件动态调整容器的外边距和内边距。
  • adaptiveDecoration: 回调函数，用于根据条件动态调整容器的装饰（如背景颜色、边框等）。

自适应布局示例

以下是一个更复杂的示例，展示了如何根据屏幕宽度调整容器的宽度和颜色：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Adaptive Container Example')),
        body: Center(
          child: AdaptiveContainer(
            width: 300,
            height: 200,
            child: Center(child: Text('Hello, Adaptive Container!')),
            adaptiveWidth: (context) {
              if (MediaQuery.of(context).size.width < 600) {
                return 200;
              } else {
                return 400;
              }
            },
            adaptiveDecoration: (context) {
              if (MediaQuery.of(context).size.width < 600) {
                return BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10),
                );
              } else {
                return BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(20),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}
回到顶部