Skip to main content

Yêu Cầu Chỉnh Sửa: Tối Ưu Bố Cục Box Điểm Và Voucher Trên Trang Chủ

Ngày cập nhật: 03/07/2026
Loại: UI/UX Layout Improvement — Home Screen Header Widgets

Ảnh feedback:

1. Vấn Đề Hiện Tại​

Ở dòng widget trên cùng của trang chủ (ngay dưới Header thông tin thành viên):

  • Box Điểm tích lũy (GPoint) và Box Voucher/Ưu đãi đang được set cứng chiều rộng (width cố định), làm xuất hiện rất nhiều khoảng trắng thừa vô lý khi số điểm hoặc số lượng voucher ít (ví dụ: chỉ có 1.000 điểm).
  • Việc chia cột chưa tối ưu, khiến các widget không dồn về phía bên trái mà bị dàn trải hoặc chiếm dụng không gian hiển thị của các icon tiện ích khác (icon QR Code và Thông báo).

2. Yêu Cầu Thay Đổi Thiết Kế​

2.1 Căn trái các widget (Left Aligned)​

  • Dồn toàn bộ hàng widget (Box Điểm, Box Voucher) căn sát về phía bên trái màn hình.
  • Các icon tiện ích bên phải (Quét mã QR, Chuông thông báo) giữ nguyên căn phải.

2.2 Chiều rộng co giãn tự động theo nội dung (Dynamic Auto-Width)​

  • Không sử dụng chiều rộng cố định (width hardcode) cho Box Điểm và Box Voucher.
  • Chiều rộng của mỗi box phải tự động tăng/giảm theo số liệu thực tế hiển thị bên trong (số điểm, số voucher).
  • Sử dụng padding ngang (paddingHorizontal) vừa đủ để tạo khoảng cách thoáng giữa icon bên trong và viền của box.

Mô phỏng hành vi co giãn của Box Điểm:

  • Khi điểm ít (1.000 G): [ G 1.000 ] (Box ngắn, vừa khít nội dung).
  • Khi điểm nhiều (10.000.000 G): [ G 10.000.000 ] (Box tự động giãn rộng ra).

3. Gợi Ý Triển Khai Code (React Native)​

Thay vì chia cột theo tỷ lệ phần trăm cố định, hãy sử dụng cơ chế Flexbox với alignSelf hoặc để nội dung tự quyết định kích thước:

// Container chứa các widget hàng ngang
<View style={{
  flexDirection: 'row',
  justifyContent: 'space-between', // Đẩy widget sang trái, icon sang phải
  alignItems: 'center',
  paddingHorizontal: 16,
  marginTop: 12
}}>
  
  {/* Nhóm Widget bên trái (Căn trái) */}
  <View style={{ flexDirection: 'row', gap: 8 }}>
    
    {/* Box Điểm - Chiều rộng tự động co giãn */}
    <View style={{
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#FFFFFF',
      paddingVertical: 8,
      paddingHorizontal: 12, // Dùng padding thay vì set width
      borderRadius: 8,
      borderWidth: 1,
      borderColor: '#E6E6E6'
    }}>
      <Image source={pointIcon} style={{ width: 16, height: 16, marginRight: 6 }} />
      <Text style={{ fontWeight: 'bold' }}>{user.points}</Text>
    </View>

    {/* Box Voucher - Chiều rộng tự động co giãn */}
    <View style={{
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#FFFFFF',
      paddingVertical: 8,
      paddingHorizontal: 12, // Dùng padding thay vì set width
      borderRadius: 8,
      borderWidth: 1,
      borderColor: '#E6E6E6'
    }}>
      <Image source={voucherIcon} style={{ width: 16, height: 16, marginRight: 6 }} />
      <Text style={{ fontWeight: 'bold' }}>{user.vouchersCount} Ưu đãi</Text>
    </View>

  </View>

  {/* Nhóm Icon bên phải (Căn phải) */}
  <View style={{ flexDirection: 'row', gap: 12 }}>
    <TouchableOpacity onPress={handleQRScan}>
      <IconQR name="qr-code-scanner" size={24} />
    </TouchableOpacity>
    <TouchableOpacity onPress={handleNotifications}>
      <IconBell name="notifications" size={24} />
    </TouchableOpacity>
  </View>

</View>

Checklist Kỹ Thuật​

  • Loại bỏ width cố định khỏi style của Box Điểm và Box Voucher trên Home.
  • Thay thế bằng paddingHorizontal (khuyến nghị: từ 12 đến 16) để tự động co giãn theo số lượng ký tự.
  • Chỉnh sửa layout hàng ngang: dồn 2 box này sát lề trái, đảm bảo khoảng cách giữa 2 box (gap hoặc marginRight) là đồng đều (khuyến nghị: 8px).
  • Test hiển thị trên màn hình với các mức điểm: 1.000, 50.000, 1.500.000 và 10.000.000 điểm để đảm bảo không bị lỗi giao diện.