طرح جدول شبکه‌ای، طرح جدول شبکه‌ای

نماد امتیاز چهار ستاره

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

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

جدول 1. مقایسه ویژگی‌های APIهای FlexBox و Grid
طرح بندی بارگذاری تنبل بسته بندی نرم به‌روزرسانی طرح‌بندی پویا
FlexBox وان دی خیر بله بله
Grid دوبعدی خیر خیر بله

بهترین شیوه‌ها

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

مواد لازم

  • Grid : یک طرح‌بندی قابل ترکیب که آیتم‌ها را در یک شبکه دوبعدی قرار می‌دهد. پیکربندی طرح‌بندی درون پارامتر config lambda مشخص می‌شود، در حالی که آیتم‌های محتوای UI درون پارامتر content lambda تعریف می‌شوند.
  • 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 lambda برای تعریف اندازه مسیرها فراخوانی کنید و فاصله سلول‌ها را با 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")
    }
}

نتایج

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

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

منابع اضافی

،

نماد امتیاز چهار ستاره

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

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

جدول 1. مقایسه ویژگی‌های APIهای FlexBox و Grid
طرح بندی بارگذاری تنبل بسته بندی نرم به‌روزرسانی طرح‌بندی پویا
FlexBox وان دی خیر بله بله
Grid دوبعدی خیر خیر بله

بهترین شیوه‌ها

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

مواد لازم

  • Grid : یک طرح‌بندی قابل ترکیب که آیتم‌ها را در یک شبکه دوبعدی قرار می‌دهد. پیکربندی طرح‌بندی درون پارامتر config lambda مشخص می‌شود، در حالی که آیتم‌های محتوای UI درون پارامتر content lambda تعریف می‌شوند.
  • 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 lambda برای تعریف اندازه مسیرها فراخوانی کنید و فاصله سلول‌ها را با 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")
    }
}

نتایج

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

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

منابع اضافی