diff --git a/ln_jq_app/lib/pages/c_page/reservation/reservation_list_bottomsheet.dart b/ln_jq_app/lib/pages/c_page/reservation/reservation_list_bottomsheet.dart index 53f239b..e51715c 100644 --- a/ln_jq_app/lib/pages/c_page/reservation/reservation_list_bottomsheet.dart +++ b/ln_jq_app/lib/pages/c_page/reservation/reservation_list_bottomsheet.dart @@ -58,32 +58,53 @@ class _ReservationListBottomSheetState extends State ); } - Container _buildChoice() { - return Container( - padding: const EdgeInsets.fromLTRB(20, 8, 0, 0), - alignment: AlignmentGeometry.centerLeft, - child: Container( - padding: const EdgeInsets.symmetric(horizontal: 8), - decoration: BoxDecoration( - color: Colors.grey[100], - borderRadius: BorderRadius.circular(8), - ), - child: DropdownButton( - value: _selectedStatus, - underline: const SizedBox.shrink(), // 隐藏下划线 - items: _statusOptions.entries.map((entry) { - return DropdownMenuItem(value: entry.key, child: Text(entry.value)); - }).toList(), - onChanged: (newValue) { - if (newValue != null) { - setState(() { - _selectedStatus = newValue; - }); - // 当选择新状态时,调用接口刷新数据 - _controller.getReservationList(addStatus: _selectedStatus); - } + Widget _buildChoice() { + return SingleChildScrollView( + scrollDirection: Axis.horizontal, + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), + child: Row( children: _statusOptions.entries.map((entry) { + bool isSelected = _selectedStatus == entry.key; + return GestureDetector( + // 关键点:增加 HitTestBehavior.opaque 扩大点击有效范围 + behavior: HitTestBehavior.opaque, + onTap: () { + if (_selectedStatus == entry.key) return; + + // 立即执行刷新逻辑 + _controller.getReservationList(addStatus: entry.key); + + // 先更新本地状态改变 UI 选中效果 + setState(() { + _selectedStatus = entry.key; + }); }, - ), + child: Container( + margin: const EdgeInsets.only(right: 12), + padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 8), + decoration: BoxDecoration( + // 选中色使用深绿色,未选中保持纯白 + color: isSelected ? const Color(0xFF006633) : Colors.white, + borderRadius: BorderRadius.circular(25), // 圆角稍微调大一点更像胶囊 + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.04), + blurRadius: 6, + offset: const Offset(0, 2), + ), + ], + ), + child: Text( + entry.key == '' ? '全部' : entry.value, + style: TextStyle( + // 未选中文字颜色微调为图片中的灰蓝色 + color: isSelected ? Colors.white : const Color(0xFFAAB6C3), + fontSize: 14.sp, + fontWeight: isSelected ? FontWeight.bold : FontWeight.w500, + ), + ), + ), + ); + }).toList(), ), ); }