Flutter响应式布局插件k_responsive的使用
Flutter响应式布局插件k_responsive的使用
设备类型
enum DeviceType {
/// 720 < [tablet] <= 1024
tablet,
/// something else
web,
/// 480 < [phoneLarge] <= 720
phoneLarge,
/// 320 < [phoneMedium] <= 480
phoneMedium,
/// [phoneSmall] <= 320
phoneSmall,
/// [watch] format default <= 200
watch,
}
使用方法
更新设计尺寸或设备约束
return MaterialApp(
builder: (ctx, child) {
return KResponsiveBuilder(
designSize: Size(375, 708), // 设计尺寸为iPhone 6/7/8的尺寸
responsive: KResponsiveObject(
tablet: 1024, // 平板设备的最大宽度
phoneMedium: 480, // 中等手机的最大宽度
watch: 200, // 手表设备的最大宽度
phoneSmall: 320, // 小型手机的最大宽度
phoneLarge: 720, // 大型手机的最大宽度
),
child: Home(), // 主页面
);
},
);
自动响应
Container(
height: 20.hSafe, // 使用安全高度
width: 20.w, // 使用宽度
child: Text(
'123',
style: TextStyle(
fontSize: 12.fSafe, // 使用安全字体大小
),
),
);
在不使用BuildContext的情况下使用
KResponsive.responsive<T>(
context: context, // 需要传递BuildContext
phoneLarge: 64.0, // 大型手机的高度
phoneMedium: 48.0, // 中型手机的高度
phoneSmall: 32.0, // 小型手机的高度
tablet: 500.0, // 平板的高度
watch: 24.0, // 手表的高度
web: 160.0, // 网页的高度
);
注意：如果BuildContext为null，则必须传递BuildContext，否则不需要。
响应式小部件
KResponsive.widgetBuilder(
phoneLarge: Container(width: 50, height: 50, color: Colors.yellow), // 大型手机的容器
phoneMedium: Container(width: 50, height: 50, color: Colors.amber), // 中型手机的容器
phoneSmall: Container(width: 50, height: 50, color: Colors.cyan), // 小型手机的容器
tablet: Container(width: 50, height: 50, color: Colors.green), // 平板的容器
watch: Container(width: 50, height: 50, color: Colors.pink), // 手表的容器
web: Container(width: 50, height: 50, color: Colors.blue), // 网页的容器
);
完整示例代码
以下是一个完整的示例代码，展示了如何在Flutter应用中使用k_responsive插件来实现响应式布局。
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:k_responsive/k_responsive.dart';
import 'package:k_responsive_example/widgets/card.dart';
import 'package:k_responsive_example/widgets/cvv.dart';
import 'package:k_responsive_example/widgets/note.dart';
import 'package:k_responsive_example/widgets/otp.dart';
import 'package:k_responsive_example/widgets/payment.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
builder: (ctx, child) {
return KResponsiveBuilder(
designSize: Size(375, 708),
responsive: KResponsiveObject(
tablet: 1024,
phoneMedium: 480,
watch: 200,
phoneSmall: 320,
phoneLarge: 720,
),
child: Home(),
);
},
);
}
}
class Home extends StatefulWidget {
[@override](/user/override)
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
[@override](/user/override)
void didChangeDependencies() {
super.didChangeDependencies();
}
[@override](/user/override)
void didUpdateWidget(covariant Home oldWidget) {
super.didUpdateWidget(oldWidget);
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_card(),
SizedBox(height: 43.hSafe),
CVV(),
SizedBox(height: 29.hSafe),
_line(),
SizedBox(height: 32.hSafe),
_option(),
SizedBox(height: 29.hSafe),
_buttonOTP(),
SizedBox(height: 34.hSafe),
_line(),
SizedBox(height: 34.heightSafe(max: 34, min: 0)),
Note(),
SizedBox(
height: KAuto().setSafeHeight(49),
),
Payment(),
SizedBox(
height: KAuto().setSafeHeight(47, min: 0, max: 47),
),
],
),
),
),
);
}
Widget _card() {
return CardCredit(
width: 351.w,
height: 204.hSafe,
);
}
Widget _line() {
return Container(
height: 0.5.hSafe,
width: 337.w,
color: Color(0xFFCED2DA),
);
}
Widget _option() {
return Container(
width: 337.w,
height: 17.hSafe,
alignment: Alignment.centerLeft,
child: Text(
'Validated with the following options',
style: GoogleFonts.roboto(
fontSize: 14.fSafe,
color: Color(0xFF475062),
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
),
),
);
}
Widget _buttonOTP() {
return Container(
width: 337.w,
alignment: Alignment.centerLeft,
child: OTP(),
);
}
Widget responsiveWidget() {
return KResponsive.widgetBuilder(
phoneLarge: Container(width: 50, height: 50, color: Colors.yellow),
phoneMedium: Container(width: 50, height: 50, color: Colors.amber),
phoneSmall: Container(width: 50, height: 50, color: Colors.cyan),
tablet: Container(width: 50, height: 50, color: Colors.green),
watch: Container(width: 50, height: 50, color: Colors.pink),
web: Container(width: 50, height: 50, color: Colors.blue),
);
}
}
更多关于Flutter响应式布局插件k_responsive的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter响应式布局插件k_responsive的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
k_responsive 是一个用于 Flutter 的响应式布局插件，旨在帮助开发者更容易地创建适应不同屏幕尺寸的应用程序。它提供了一些工具和实用程序，使得在不同设备上调整布局变得更加简单。
安装
首先，你需要在 pubspec.yaml 文件中添加 k_responsive 依赖：
dependencies:
flutter:
sdk: flutter
k_responsive: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
基本用法
1. 初始化 KResponsive
在你的应用程序的入口点（通常是 main.dart 文件）中，初始化 KResponsive：
import 'package:flutter/material.dart';
import 'package:k_responsive/k_responsive.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return KResponsive(
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
),
);
}
}
2. 使用 KResponsiveBuilder
KResponsiveBuilder 是一个用于构建响应式布局的 widget。它可以根据屏幕的宽度、高度、方向等信息来调整布局。
import 'package:flutter/material.dart';
import 'package:k_responsive/k_responsive.dart';
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('KResponsive Demo'),
),
body: KResponsiveBuilder(
builder: (context, screenInfo) {
if (screenInfo.screenType == ScreenType.mobile) {
return Center(
child: Text('This is a mobile layout'),
);
} else if (screenInfo.screenType == ScreenType.tablet) {
return Center(
child: Text('This is a tablet layout'),
);
} else {
return Center(
child: Text('This is a desktop layout'),
);
}
},
),
);
}
}
3. 使用 KResponsive 提供的工具
KResponsive 提供了一些工具方法来帮助你根据屏幕尺寸调整布局：
KResponsive.of(context).widthPercent(50)：获取屏幕宽度的 50%。KResponsive.of(context).heightPercent(50)：获取屏幕高度的 50%。KResponsive.of(context).textScaleFactor：获取当前的文本缩放因子。KResponsive.of(context).orientation：获取当前的屏幕方向。
import 'package:flutter/material.dart';
import 'package:k_responsive/k_responsive.dart';
class MyHomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('KResponsive Demo'),
),
body: Center(
child: Container(
width: KResponsive.of(context).widthPercent(50),
height: KResponsive.of(context).heightPercent(20),
color: Colors.blue,
child: Center(
child: Text(
'Responsive Container',
style: TextStyle(
fontSize: 20 * KResponsive.of(context).textScaleFactor,
color: Colors.white,
),
),
),
),
),
);
}
}