Browse Source

🐛 fix(market): 修复行情列表窄屏横向溢出

Co-authored-by: Cursor <cursoragent@cursor.com>
maotouying_cc 1 tháng trước cách đây
mục cha
commit
6123764d60

+ 22 - 4
lib/presentation/screens/market/market_screen.dart

@@ -289,9 +289,18 @@ class _SpotListHeader extends ConsumerWidget {
         behavior: HitTestBehavior.opaque,
         child: Row(
           mainAxisAlignment: align,
-          mainAxisSize: MainAxisSize.min,
           children: [
-            Text(label, style: TextStyle(color: color, fontSize: 12)),
+            Flexible(
+              child: Text(
+                label,
+                style: TextStyle(color: color, fontSize: 12),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                textAlign: align == MainAxisAlignment.end
+                    ? TextAlign.right
+                    : TextAlign.left,
+              ),
+            ),
             const SizedBox(width: 2),
             _SortIcon(active: active, asc: sortAsc, color: color),
           ],
@@ -491,9 +500,18 @@ class _ListHeader extends ConsumerWidget {
           behavior: HitTestBehavior.opaque,
           child: Row(
             mainAxisAlignment: align,
-            mainAxisSize: MainAxisSize.min,
             children: [
-              Text(label, style: TextStyle(color: color, fontSize: 12)),
+              Flexible(
+                child: Text(
+                  label,
+                  style: TextStyle(color: color, fontSize: 12),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  textAlign: align == MainAxisAlignment.end
+                      ? TextAlign.right
+                      : TextAlign.left,
+                ),
+              ),
               const SizedBox(width: 2),
               _SortIcon(active: active, asc: sortAsc, color: color),
             ],

+ 17 - 3
lib/presentation/widgets/market_list_row_layout.dart

@@ -41,13 +41,27 @@ class MarketListDataRow extends StatelessWidget {
         ),
         SizedBox(
           width: kMarketListPriceColumnWidth,
-          child: Align(
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
             alignment: Alignment.centerRight,
-            child: price,
+            child: SizedBox(
+              width: kMarketListPriceColumnWidth,
+              child: price,
+            ),
           ),
         ),
         const SizedBox(width: kMarketListPriceToBadgeGap),
-        SizedBox(width: kMarketListChangeBadgeWidth, child: change),
+        SizedBox(
+          width: kMarketListChangeBadgeWidth,
+          child: FittedBox(
+            fit: BoxFit.scaleDown,
+            alignment: Alignment.center,
+            child: SizedBox(
+              width: kMarketListChangeBadgeWidth,
+              child: change,
+            ),
+          ),
+        ),
       ],
     );
   }