From f0d56772b1dada8b204a69f26763c6ccb1102b11 Mon Sep 17 00:00:00 2001 From: lcy <2503978335@qq.com> Date: Wed, 14 Jun 2023 19:50:42 +0800 Subject: [PATCH] feat:更新尺寸适配 --- lib/app/app.dart | 13 ++++++++++++- lib/common/widgets/textfield_customer_widget.dart | 12 ++++++------ lib/common/widgets/we_app_bar.dart | 1 + lib/home/home_page.dart | 2 +- lib/lessons/lesson_page.dart | 10 +++++----- lib/listen/widgets/listen_item_widget.dart | 19 ++++++++++--------- lib/login/forgetpwd/forget_password_home_page.dart | 17 +++++++++-------- lib/login/loginpage/login_page.dart | 60 ++++++++++++++++++++++++++++++++++++------------------------ lib/login/loginpage/time_widget.dart | 13 +++++++++---- lib/login/setpwd/set_pwd_page.dart | 22 ++++++++++++---------- pubspec.yaml | 1 + 11 files changed, 102 insertions(+), 68 deletions(-) diff --git a/lib/app/app.dart b/lib/app/app.dart index caa9db7..5c0464f 100644 --- a/lib/app/app.dart +++ b/lib/app/app.dart @@ -2,6 +2,8 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_easyloading/flutter_easyloading.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:responsive_framework/breakpoint.dart'; +import 'package:responsive_framework/responsive_breakpoints.dart'; import 'package:wow_english/common/widgets/hide_keyboard_widget.dart'; import 'package:wow_english/route/route.dart'; import 'package:wow_english/tab/blocs/tab_bloc.dart'; @@ -25,7 +27,16 @@ class App extends StatelessWidget { colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), - builder: EasyLoading.init(), + builder: EasyLoading.init( + builder: (context,child) => ResponsiveBreakpoints( + breakpoints: const [ + Breakpoint(start: 0, end: 450, name: MOBILE), + Breakpoint(start: 451, end: 800, name: TABLET), + Breakpoint(start: 801, end: 1920, name: DESKTOP), + Breakpoint(start: 1921, end: double.infinity, name: '4K'), + ], + child: child!) + ), initialRoute: AppRouteName.splash, navigatorKey: AppRouter.navigatorKey, onGenerateRoute: AppRouter.generateRoute, diff --git a/lib/common/widgets/textfield_customer_widget.dart b/lib/common/widgets/textfield_customer_widget.dart index c7988d4..3f03510 100644 --- a/lib/common/widgets/textfield_customer_widget.dart +++ b/lib/common/widgets/textfield_customer_widget.dart @@ -59,14 +59,14 @@ class _TextFieldCustomerWidgetState extends State { decoration: InputDecoration( hintText: widget.hitText??'', border: InputBorder.none, - hintStyle: widget.hitStyle?? const TextStyle( - fontSize: 16, - color:Color(0xFF999999) + hintStyle: widget.hitStyle?? TextStyle( + fontSize: 16.sp, + color:const Color(0xFF999999) ) ), - style: widget.textStyle?? const TextStyle( - color: Color(0xFF333333), - fontSize: 16, + style: widget.textStyle?? TextStyle( + color: const Color(0xFF333333), + fontSize: 16.sp, ), onChanged: widget.onChangeValue, ), diff --git a/lib/common/widgets/we_app_bar.dart b/lib/common/widgets/we_app_bar.dart index 4b5f43b..4401879 100644 --- a/lib/common/widgets/we_app_bar.dart +++ b/lib/common/widgets/we_app_bar.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:wow_english/common/extension/string_extension.dart'; class WEAppBar extends StatelessWidget implements PreferredSizeWidget { diff --git a/lib/home/home_page.dart b/lib/home/home_page.dart index 72d3e43..d68e357 100644 --- a/lib/home/home_page.dart +++ b/lib/home/home_page.dart @@ -31,7 +31,7 @@ class _HomePageView extends StatelessWidget { } else if (type == HeaderActionType.listen) { Navigator.of(AppRouter.context).pushNamed(AppRouteName.listen); } else if (type == HeaderActionType.shop) { - + } else { } diff --git a/lib/lessons/lesson_page.dart b/lib/lessons/lesson_page.dart index 5523e20..03814f7 100644 --- a/lib/lessons/lesson_page.dart +++ b/lib/lessons/lesson_page.dart @@ -29,7 +29,7 @@ class LessonPage extends StatelessWidget { class _LessonPageView extends StatelessWidget { - final double _cardHeight = 240.0; + final double _cardHeight = 240.h; final double _numItemHeight = 32.0; @@ -86,15 +86,15 @@ class _LessonPageView extends StatelessWidget { ), 32.verticalSpace, SizedBox( - height: 32, - width: 660, + height: 32.h, + width: 660.w, child: ListView.builder( itemCount: 10, scrollDirection: Axis.horizontal, itemBuilder: (BuildContext context,int index){ return Container( - height: 32, - width: 66, + height: 32.h, + width: 66.w, padding: const EdgeInsets.symmetric(horizontal: 5), child: GestureDetector( onTap: () { diff --git a/lib/listen/widgets/listen_item_widget.dart b/lib/listen/widgets/listen_item_widget.dart index ce84f9e..0cb871b 100644 --- a/lib/listen/widgets/listen_item_widget.dart +++ b/lib/listen/widgets/listen_item_widget.dart @@ -22,21 +22,21 @@ class ListenItemWidget extends StatelessWidget { } }, child: ClipRRect( - borderRadius:BorderRadius.circular(90), + borderRadius:BorderRadius.circular(90.r), child: Stack( alignment:Alignment.center, children: [ Image.network( 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Faa1c2213-820a-4223-8757-5f8cee318a28%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1688713226&t=192b18a613683bcdc5bd76f65c9ff032', - height: 180, - width: 180, + height: 180.w, + width: 180.w, fit: BoxFit.fill, ), Offstage( offstage: isLock??false, child: Container( - height: 180, - width: 180, + height: 180.w, + width: 180.w, color: const Color.fromRGBO(1, 1, 0, 0.5), ), ), @@ -44,8 +44,8 @@ class ListenItemWidget extends StatelessWidget { offstage: isLock, child: Image.asset( 'listen_lock'.assetPng, - height: 36, - width: 41, + height: 36.h, + width: 41.w, ), ) ], @@ -55,7 +55,7 @@ class ListenItemWidget extends StatelessWidget { 23.verticalSpace, Container( height: 40.h, - padding: const EdgeInsets.symmetric(horizontal: 22), + padding: EdgeInsets.symmetric(horizontal: 22.w), decoration: BoxDecoration( color: const Color(0xFFFFCC00), borderRadius: BorderRadius.circular(20.r), @@ -68,7 +68,8 @@ class ListenItemWidget extends StatelessWidget { child: Text( 'listen title', style: TextStyle( - fontSize: 15.sp + fontSize: 20.sp, + color: const Color(0xFF333333) ), ), ) diff --git a/lib/login/forgetpwd/forget_password_home_page.dart b/lib/login/forgetpwd/forget_password_home_page.dart index e374171..ebfe5a9 100644 --- a/lib/login/forgetpwd/forget_password_home_page.dart +++ b/lib/login/forgetpwd/forget_password_home_page.dart @@ -54,11 +54,11 @@ class _ForgetPasswordHomePageView extends StatelessWidget { width: 83.5.h, ), 12.5.horizontalSpace, - const Text( + Text( '修改密码\n请输入您的手机号和验证码吧', style: TextStyle( - fontSize: 16.5, - color: Color(0xFF666666) + fontSize: 16.sp, + color: const Color(0xFF666666) ), ) ], @@ -143,14 +143,15 @@ class _ForgetPasswordHomePageView extends StatelessWidget { fit: BoxFit.fill ), ), - padding: const EdgeInsets.symmetric( - horizontal: 28.0, - vertical: 14.0 + padding: EdgeInsets.symmetric( + horizontal: 28.w, + vertical: 14.h ), - child:const Text( + child: Text( '确定', style: TextStyle( - fontSize: 16 + fontSize: 16.sp, + color: Colors.white ), ), ), diff --git a/lib/login/loginpage/login_page.dart b/lib/login/loginpage/login_page.dart index 81aaf2f..961e693 100644 --- a/lib/login/loginpage/login_page.dart +++ b/lib/login/loginpage/login_page.dart @@ -59,9 +59,12 @@ class _LoginPageView extends StatelessWidget { fit: BoxFit.fill ), ), - padding: const EdgeInsets.symmetric(horizontal: 18.0), + padding: EdgeInsets.symmetric(horizontal: 18.w,vertical: 5.h), child: Text( - bloc.loginType == LoginType.sms?'密码登陆':'验证码密码' + bloc.loginType == LoginType.sms?'密码登陆':'验证码密码', + style: TextStyle( + fontSize: 16.sp + ), ), ), ) @@ -95,18 +98,18 @@ class _LoginPageView extends StatelessWidget { RichText( text: TextSpan( children:[ - const TextSpan( + TextSpan( text: '我已阅读并同意', style: TextStyle( - fontSize: 12, - color: Color(0xFF333333), + fontSize: 12.sp, + color: const Color(0xFF333333), ) ), TextSpan( text: '《用户隐私协议》', - style: const TextStyle( - fontSize: 12, - color: Color(0xFF333333), + style: TextStyle( + fontSize: 12.sp, + color: const Color(0xFF333333), ), recognizer: TapGestureRecognizer()..onTap = (){ Navigator.of(context).pushNamed( @@ -116,18 +119,18 @@ class _LoginPageView extends StatelessWidget { 'webViewTitle':'用户隐私协议' }); }), - const TextSpan( + TextSpan( text: '，', style: TextStyle( - fontSize: 12, - color: Color(0xFF333333) + fontSize: 12.sp, + color: const Color(0xFF333333) ) ), TextSpan( text: '《儿童隐私政策》', - style: const TextStyle( - fontSize: 12, - color: Color(0xFF333333) + style: TextStyle( + fontSize: 12.sp, + color: const Color(0xFF333333) ), recognizer: TapGestureRecognizer()..onTap = (){ Navigator.of(context).pushNamed( @@ -157,12 +160,15 @@ class _LoginPageView extends StatelessWidget { fit: BoxFit.fill ), ), - padding: const EdgeInsets.symmetric( - horizontal: 28.0, - vertical: 14.0 + padding: EdgeInsets.symmetric( + horizontal: 28.w, + vertical: 14.h ), - child: const Text( - '登录' + child: Text( + '登录', + style: TextStyle( + fontSize: 16.sp + ), ), ), ) @@ -198,7 +204,11 @@ class _LoginPageView extends StatelessWidget { controller: bloc.phoneNumController, ), 6.5.verticalSpace, - const Text('未注册用户登录默认注册'), + Text('未注册用户登录默认注册', + style: TextStyle( + fontSize: 12.sp, + color: const Color(0xFF999999) + ),), 4.5.verticalSpace, Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -215,8 +225,7 @@ class _LoginPageView extends StatelessWidget { controller: bloc.checkNumController, ) ), - TimerWidget( - canSendSms: bloc.canSendSms) + TimerWidget(canSendSms: bloc.canSendSms) ], ) ], @@ -289,8 +298,11 @@ class _LoginPageView extends StatelessWidget { width: 100.w, height: 55.h, alignment: Alignment.centerLeft, - child: const Text( - '忘记密码 ?' + child: Text( + '忘记密码 ?', + style: TextStyle( + fontSize: 12.sp + ), ), ), ) diff --git a/lib/login/loginpage/time_widget.dart b/lib/login/loginpage/time_widget.dart index 9a968fd..4c2235b 100644 --- a/lib/login/loginpage/time_widget.dart +++ b/lib/login/loginpage/time_widget.dart @@ -1,6 +1,7 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:wow_english/common/blocs/timerbloc/timer_bloc.dart'; import 'package:wow_english/common/extension/string_extension.dart'; import 'package:wow_english/common/widgets/timer_ticker.dart'; @@ -43,9 +44,7 @@ class TimerWidgetView extends StatelessWidget { final bloc = BlocProvider.of(context); return GestureDetector( onTap: () { - print(bloc.isCountTimer); if (canSendSms && !bloc.isCountTimer ) { - print(state.duration); bloc.add(StartEvent(duration: state.duration)); } }, @@ -58,13 +57,16 @@ class TimerWidgetView extends StatelessWidget { fit: BoxFit.fill ), ), - padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0), + padding: EdgeInsets.symmetric(horizontal:12.w,vertical: 15.h), child: Row( children: [ if (state is RunningState)...[ const TimerText() ] else ...[ - const Text('获取验证码') + Text('获取验证码', + style: TextStyle( + fontSize: 12.sp + ),) ] ], ), @@ -83,6 +85,9 @@ class TimerText extends StatelessWidget { final secondsStr = duration.toString().padLeft(2, '0'); return Text( '${secondsStr}s后再次获取', + style: TextStyle( + fontSize: 12.sp + ), ); } } diff --git a/lib/login/setpwd/set_pwd_page.dart b/lib/login/setpwd/set_pwd_page.dart index 3d84329..a250db7 100644 --- a/lib/login/setpwd/set_pwd_page.dart +++ b/lib/login/setpwd/set_pwd_page.dart @@ -55,11 +55,11 @@ class _SetPassWordPageView extends StatelessWidget { width: 83.5.h, ), 12.5.horizontalSpace, - const Text( + Text( '欢迎登录wow english\n接下来请设置一下您的密码吧！', style: TextStyle( - fontSize: 16.5, - color: Color(0xFF666666) + fontSize: 16.5.sp, + color: const Color(0xFF666666) ), ) ], @@ -129,10 +129,11 @@ class _SetPassWordPageView extends StatelessWidget { 9.verticalSpace, Offstage( offstage: bloc.passwordCheck, - child: const Text( + child: Text( '请确认两次输入的密码是否一致', style: TextStyle( - color: Color(0xFF333333) + fontSize: 16.sp, + color: const Color(0xFF333333) ), ), ), @@ -155,14 +156,15 @@ class _SetPassWordPageView extends StatelessWidget { fit: BoxFit.fill ), ), - padding: const EdgeInsets.symmetric( - horizontal: 28.0, - vertical: 14.0 + padding: EdgeInsets.symmetric( + horizontal: 28.w, + vertical: 14.h ), - child: const Text( + child: Text( '确定', style: TextStyle( - color: Colors.white + color: Colors.white, + fontSize: 16.sp ), ), ), diff --git a/pubspec.yaml b/pubspec.yaml index 6dc5b2c..841286f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -85,6 +85,7 @@ dependencies: limiting_direction_csx: ^0.2.0 # 富文本插件 https://pub.dev/packages/extended_text extended_text: ^11.0.1 + responsive_framework: ^1.0.0 dev_dependencies: build_runner: ^2.4.4 -- libgit2 0.22.2