چیدمان جدول شبکه‌ای

نماد رده‌بندی چهار ستاره

این دستورالعمل نشان می‌دهد که چگونه Grid API خوانایی کد را در مقایسه با ساختارهای تودرتو سنتی بهبود می‌بخشد. با پیکربندی قطعه‌های دارای اندازه خودکار، می‌توانید جدولی ایجاد کنید که به‌طور پویا با عرض و ارتفاع سلول براساس اندازه ذاتی ترکیب‌پذیرهای نوشتاری شما سازگار شود.

در این دستورالعمل، جدولی بااستفاده از Grid API می‌سازید.

جدول ۱. مقایسه ویژگی‌های میاناهای برنامه‌سازی کاربردی FlexBox و Grid
چیدمان بارکردن کُند شکستن نرم به‌روزرسانی چیدمان پویا
FlexBox ۱روز نه بله بله
Grid دو بعدی نه نه بله

روال‌های مطلوب

برای بهبود خوانایی و قابلیت نگهداری جدول، از ترکیب‌پذیر Grid استفاده کنید. Grid به شما امکان می‌دهد ابعاد و تراز ستون‌ها را در همه ردیف‌ها به‌طور دقیق کنترل کنید، بدون اینکه لازم باشد پهنای آن‌ها را به‌طور دستی همگام‌سازی کنید.

مواد تشکیل‌دهنده

  • ‫Grid: چیدمان قابل‌ترکیبی که موارد را در جدولی دوبعدی قرار می‌دهد. پیکربندی چیدمان در پارامتر لامبدا config مشخص می‌شود، درحالی‌که موارد محتوای واسط کاربر در پارامتر لامبدا content اعلام می‌شوند.
  • GridTrackSize.Auto: اندازه قطعه خودکار را در پیکربندی شبکه براساس اندازه ذاتی محتوا مشخص می‌کند، برای مثال، column(GridTrackSize.Auto) و row(GridTrackSize.Auto).
  • gap(): فاصله ردیف و ستون را در GridConfigurationScope پیکربندی می‌کند، مانند gap(row = 8.dp, column = 16.dp).

قدم‌ها

جدول مقایسه چندستونی بااستفاده از یک طرح‌بندی Grid با تراز ستون خودکار و اندازه‌گذاری قطعه برای همه موارد بسازید.

۱. شمارش ردیف‌ها و ستون‌های شبکه برای تعیین اندازه قطعه‌ها

ابتدا ستون‌ها و ردیف‌هایتان را بشمارید تا اندازه قطعه‌ها را تعیین کنید:

  • ستون‌ها: تعداد مشخصه‌هایی که مقایسه می‌کنید، به‌علاوه یک ستون برای نام مورد.
  • ردیف‌ها: تعداد مواردی که مقایسه می‌کنید، به‌علاوه یک ردیف سرصفحه.

برای این دستورالعمل که دو مؤلفه (FlexBox و Grid) را در چهار مشخصه مقایسه می‌کند، به پنج ستون و سه ردیف نیاز دارید.

۲. پیاده‌سازی جدول مقایسه بااستفاده از Grid

یک TableInGrid ترکیب‌پذیر ایجاد کنید که از Grid برای چیدمان موارد جدول شما استفاده می‌کند. توابع column و row را در لامبدا config فراخوانی کنید تا اندازه‌های قطعه را تعریف کنید و فاصله سلول را با gap() تنظیم کنید. چون نوشتار اندازه ذاتی دارد، GridTrackSize.Auto به‌طور خودکار اندازه ستون‌ها و ردیف‌ها را متناسب با محتوایشان تغییر می‌دهد.

در داخل لامبدا content، سرصفحه‌ها و داده‌های جدول را قرار دهید. Grid به‌طور خودکار جای‌گذاری و تراز کردن همه سلول‌ها را مدیریت می‌کند:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

نتایج

اکنون یک جدول مقایسه دوبعدی تمیز با تراز خودکار ستون و cellspacing ساخته‌اید.

شکل ۱. جدول مقایسه بااستفاده از Grid.

منابع بیشتر