Browse Source

refactor(agent_view): 优化扩展选项按钮的布局和滚动行为

将Row改为Wrap布局实现按钮自动换行
添加水平滚动确保在小屏幕设备上可用
调整容器高度和边距以改善视觉效果
weicu
lxm 1 year ago
parent
commit
fd54772946
  1. 32
      lib/modules/agent/views/agent_view.dart

32
lib/modules/agent/views/agent_view.dart

@ -1,5 +1,6 @@
import 'dart:async'; import 'dart:async';
import 'dart:io'; import 'dart:io';
import 'dart:math';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import '../controllers/agent_controller.dart'; import '../controllers/agent_controller.dart';
@ -731,15 +732,27 @@ class _AgentViewState extends State<AgentView> with WidgetsBindingObserver {
return AnimatedContainer( return AnimatedContainer(
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut, curve: Curves.easeInOut,
height: isExpanded ? 120.h : 0, // 调整高度以适应按钮尺寸 height: isExpanded ? 100.h : 0, // 调整高度以适应按钮尺寸
child: isExpanded child: isExpanded
? Container( ? LayoutBuilder(
margin: EdgeInsets.only(top: 8.h), // 添加LayoutBuilder获取实际约束
padding: builder: (context, constraints) {
EdgeInsets.symmetric(horizontal: 16.w), return SingleChildScrollView(
child: Row( // 确保内容可滚动
mainAxisAlignment: MainAxisAlignment scrollDirection:
.spaceEvenly, // 改为均匀分布 Axis.horizontal, // 水平滚动
child: Container(
margin: EdgeInsets.only(top: 16.h),
padding: EdgeInsets.symmetric(
horizontal: 16.w),
// 根据可用宽度调整容器宽度
width: max(constraints.maxWidth,
300.w), // 最小300宽
child: Wrap(
// 使用Wrap替代Row,自动换行
alignment: WrapAlignment.center,
spacing: 26.w, // 按钮水平间距
runSpacing: 8.h, // 按钮垂直间距
children: [ children: [
// 相机按钮 // 相机按钮
_buildPlusOptionButton( _buildPlusOptionButton(
@ -787,6 +800,9 @@ class _AgentViewState extends State<AgentView> with WidgetsBindingObserver {
), ),
], ],
), ),
),
);
},
) )
: const SizedBox.shrink(), : const SizedBox.shrink(),
); );

Loading…
Cancel
Save