筛选框样式

ln_jq_app/lib/pages/c_page/reservation/reservation_list_bottomsheet.dart

@@ -58,32 +58,53 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
     );
   }
 
-  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<String>(
-          value: _selectedStatus,
-          underline: const SizedBox.shrink(), // 隐藏下划线
-          items: _statusOptions.entries.map((entry) {
-            return DropdownMenuItem<String>(value: entry.key, child: Text(entry.value));
-          }).toList(),
-          onChanged: (newValue) {
-            if (newValue != null) {
+  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 = newValue;
+              _selectedStatus = entry.key;
             });
-              // 当选择新状态时，调用接口刷新数据
-              _controller.getReservationList(addStatus: _selectedStatus);
-            }
           },
+          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(),
       ),
     );
   }