Browse Source

refactor(translation): 优化翻译中间件视图布局结构

- 移除冗余的Padding和Column包装,直接使用GridView作为body
- 调整网格子项的内边距和宽高比例
- 优化卡片内部布局,使用Spacer替代固定间距
newdev_shunjiawei
lxm 11 months ago
parent
commit
88670558f1
  1. 24
      lib/modules/translation/middleware/views/translation_middleware_view.dart

24
lib/modules/translation/middleware/views/translation_middleware_view.dart

@ -15,6 +15,7 @@ class TranslationMiddlewareView
final isDarkMode = Theme.of(context).brightness == Brightness.dark; final isDarkMode = Theme.of(context).brightness == Brightness.dark;
return Scaffold( return Scaffold(
//primary: false,
backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.grey[50], backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.grey[50],
appBar: _buildAppBar(isDarkMode), appBar: _buildAppBar(isDarkMode),
body: _buildBody(isDarkMode), body: _buildBody(isDarkMode),
@ -49,29 +50,19 @@ class TranslationMiddlewareView
/// 构建主体内容 /// 构建主体内容
Widget _buildBody(bool isDarkMode) { Widget _buildBody(bool isDarkMode) {
return SafeArea( return SafeArea(
child: Padding( child: _buildTranslationOptionsGrid(isDarkMode),
padding: EdgeInsets.all(20.w),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 翻译功能选项网格
Expanded(
child: _buildTranslationOptionsGrid(isDarkMode),
),
],
),
),
); );
} }
/// 构建翻译选项网格 /// 构建翻译选项网格
Widget _buildTranslationOptionsGrid(bool isDarkMode) { Widget _buildTranslationOptionsGrid(bool isDarkMode) {
return GridView.builder( return GridView.builder(
padding: EdgeInsets.all(20.w), // 将内边距应用于网格内容
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, crossAxisCount: 2,
crossAxisSpacing: 16.w, crossAxisSpacing: 16.w,
mainAxisSpacing: 16.h, mainAxisSpacing: 16.h,
childAspectRatio: 0.85, childAspectRatio: 1,
), ),
itemCount: controller.translationOptions.length, itemCount: controller.translationOptions.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
@ -120,9 +111,9 @@ class TranslationMiddlewareView
], ],
), ),
child: Padding( child: Padding(
padding: EdgeInsets.all(20.w), padding: EdgeInsets.fromLTRB(20.w, 28.h, 20.w, 20.h),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
// 图标 // 图标
Container( Container(
@ -138,7 +129,8 @@ class TranslationMiddlewareView
color: option.iconColor.withOpacity(isEnabled ? 1.0 : 0.5), color: option.iconColor.withOpacity(isEnabled ? 1.0 : 0.5),
), ),
), ),
SizedBox(height: 16.h),
const Spacer(),
// 标题 // 标题
Text( Text(

Loading…
Cancel
Save