أشرطة التطبيقات

أشرطة التطبيقات هي حاويات توفر للمستخدم إمكانية الوصول إلى الميزات الرئيسية عناصر التنقل. هناك نوعان من أشرطة التطبيقات، أشرطة التطبيقات العلوية والجزء السفلي منها. حانات. في ما يلي مظهر كل منهما والغرض منه:

النوع	المظهر	الغرض
شريط التطبيق العلوي	في أعلى الشاشة	يتيح الوصول إلى المهام والمعلومات الرئيسية. يستضيف عادةً عنوانًا وبنود إجراءات أساسية وبعض عناصر التنقّل.
شريط التطبيق السفلي	في أسفل الشاشة	تتضمن عادةً عناصر التنقل الأساسية. ويمكن أن يوفّر أيضًا إمكانية الوصول إلى إجراءات رئيسية أخرى، مثل استخدام زر إجراء عائم مضمَّن.

لتنفيذ شريط التطبيق العلوي وشريط التطبيق السفلي، استخدِم TopAppBar BottomAppBar عنصر قابل للإنشاء، على التوالي. إنها تتيح لك إنشاء مقاطع فيديو متسقة والواجهات التي تتضمن عناصر التحكم في التنقل والإجراءات، تتماشى مع مبادئ Material Design.

أهم أشرطة التطبيقات

يوضّح الجدول التالي الأنواع الأربعة لأهم أشرطة التطبيقات:

النوع	مثال
صغيرة: للشاشات التي لا تتطلب الكثير من التنقل أو الإجراءات.
المحاذاة إلى الوسط: للشاشات التي تحتوي على إجراء أساسي واحد.
متوسط: للشاشات التي تتطلب قدرًا متوسطًا من التنقّل والإجراءات.
كبيرة: للشاشات التي تتطلّب الكثير من التنقّل والإجراءات

مساحة عرض واجهة برمجة التطبيقات

العناصر المتنوعة القابلة للإنشاء التي تسمح لك بتنفيذ أفضل أربعة تطبيقات الأشرطة متشابهة إلى حد كبير. تشتركان في عدة معلمات رئيسية:

• title: النص الذي يظهر على شريط التطبيقات
• navigationIcon: الرمز الأساسي للتنقل يظهر في صفحة على يسار شريط التطبيق.
• actions: الرموز التي توفّر للمستخدم إمكانية الوصول إلى الإجراءات الرئيسية تظهر على يمين شريط التطبيق.
• scrollBehavior: لتحديد كيفية استجابة شريط التطبيق العلوي للتمرير في المحتوى الداخلي للسقالة.
• colors: يحدِّد شكل ظهور شريط التطبيقات.

سلوك التمرير

يمكنك التحكّم في استجابة شريط التطبيق عندما يتنقّل المستخدم في أسفل الشاشة. المحتوى الداخلي لسقافل. للقيام بذلك، قم بإنشاء مثيل TopAppBarScrollBehavior ومرِّره إلى شريط التطبيق العلوي مَعلمة scrollBehavior.

هناك ثلاثة أنواع من TopAppBarScrollBehavior. وهي كما يلي:

• enterAlwaysScrollBehavior: عندما يسحب المستخدم الجزء الداخلي للسقالة المحتوى، يتم تصغير شريط التطبيق العلوي. يتم توسيع شريط التطبيق عندما يقوم المستخدم بعد ذلك تسحب المحتوى الداخلي.
• exitUntilCollapsedScrollBehavior: مشابه لـ enterAlwaysScrollBehavior، على الرغم من أن شريط التطبيق يتوسع أيضًا عندما يصل المستخدم إلى نهاية المحتوى الداخلي لسقافل.
• pinnedScrollBehavior: يظل شريط التطبيقات في مكانه ولا يتفاعل مع. التمرير.

تنفذ الأمثلة التالية العديد من هذه الخيارات.

أمثلة

تقدم الأقسام التالية عمليات تنفيذ للأنواع الأربعة المختلفة من وأشرطة التطبيقات، بما في ذلك أمثلة متنوعة لكيفية التحكم في سلوك التمرير.

صغير

لإنشاء شريط تطبيق علوي صغير، استخدِم TopAppBar القابل للإنشاء. هذه هي أبسط شريط تطبيق علوي ممكن وفي هذا المثال يحتوي فقط على عنوان.

المثال التالي لا يمرر TopAppBar إلى قيمة scrollBehavior، وبالتالي لا تتفاعل مع التمرير في الجزء الداخلي. المحتوى.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

تظهر طريقة التنفيذ هذه على النحو التالي:

تمت المحاذاة إلى الوسط

يكون شريط التطبيق العلوي المحاذي للوسط هو في الأساس نفس شريط التطبيق الصغير، على الرغم من أن العنوان يتم توسيطه داخل المكون. لتنفيذه، استخدم المخصّص CenterAlignedTopAppBar القابل للإنشاء.

يستخدم هذا المثال enterAlwaysScrollBehavior() للحصول على القيمة التي تتجاوزها. لصالح scrollBehavior. وبناءً على ذلك، يتم تصغير الشريط عندما يمرر المستخدم المحتوى الداخلي لسقافل.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

تظهر طريقة التنفيذ هذه على النحو التالي:

متوسط

يضع شريط التطبيق العلوي المتوسط العنوان أسفل أي رموز إضافية. لإنشاء أولاً، استخدِم العنصر MediumTopAppBar القابل للإنشاء.

مثل المقتطف السابق، يستخدم هذا المثال enterAlwaysScrollBehavior() لتنفيذ ما يلي: الحصول على القيمة التي يتم تمريرها لـ scrollBehavior.

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

تظهر طريقة التنفيذ هذه على النحو التالي، مع عرض توضيحي لكيفية استخدام التمرير إظهار سلوك من enterAlwaysScrollBehavior():

كبير

يتشابه شريط التطبيق العلوي الكبير مع الوسيط، على الرغم من أن المساحة المتروكة بين العنوان والأيقونات أكبر وتشغل مساحة أكبر على الشاشة بشكل عام. إلى إنشاء حساب، استخدِم عنصر LargeTopAppBar القابل للإنشاء.

وعلى عكس المقتطفات السابقة، يستخدم هذا المثال exitUntilCollapsedScrollBehavior() للحصول على القيمة التي يتم تمريرها scrollBehavior وبناءً على ذلك، يتم تصغير الشريط عندما يمرر المستخدم المحتوى الداخلي للسقالة، ولكن بعد ذلك يتوسع عندما يقوم المستخدم بالتمرير إلى نهاية المحتوى الداخلي.

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

تظهر طريقة التنفيذ هذه على النحو التالي:

شريط التطبيق السفلي

لإنشاء شريط تطبيق سفلي، استخدِم عنصر BottomAppBar القابل للإنشاء. استخدام هذا القابلة للإنشاء تشبه إلى حد كبير الجزء العلوي من شريط التطبيق القابل للإنشاء الموضح في الأقسام السابقة من هذه الصفحة. يتم تمرير عناصر قابلة للإنشاء للمفتاح التالي المَعلمات:

• actions: سلسلة من الرموز التي تظهر على الجانب الأيمن من الشريط هذه عادةً ما تكون إما إجراءات رئيسية للشاشة المحددة، أو عناصر تنقل.
• floatingActionButton: زر الإجراء الرئيسي الذي يظهر على الجانب الأيمن من الشريط.

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

تظهر طريقة التنفيذ هذه على النحو التالي:

مصادر إضافية

• مستندات Material3 - شريط التطبيق العلوي
• مستندات Material3 - شريط التطبيق السفلي
• سقالة