Flutter: تصبح عناصر BottomNavigationBar بيضاء عند وجود أكثر من 3 عناصر

تم إنشاؤها على ١٧ ديسمبر ٢٠١٧  ·  21تعليقات  ·  مصدر: flutter/flutter

خطوات التكاثر

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

انظر أيضًا إلى الصور التالية:

schermafbeelding 2017-12-17 om 20 52 39

schermafbeelding 2017-12-17 om 20 52 50

السجلات

غير متاح

دكتور رفرفة

[✓] Flutter (on Mac OS X 10.13.1 17B1003, locale nl-NL, channel alpha)
    • Flutter at /Users/dirk/Developer/flutter/sdk
    • Framework revision 8f65fec5f5 (5 days ago), 2017-12-12 09:50:14 -0800
    • Engine revision edaecdc8b8
    • Tools Dart version 1.25.0-dev.11.0
    • Engine Dart version 2.0.0-edge.d8ae797298c3a6cf8dc9f4558707bd2672224d3e

[✓] Android toolchain - develop for Android devices (Android SDK 26.0.0)
    • Android SDK at /Users/dirk/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-26, build-tools 26.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[-] iOS toolchain - develop for iOS devices (Xcode 9.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 9.2, Build version 9C40b
    ✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    • CocoaPods version 1.2.0

[✓] Android Studio (version 2.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Java version OpenJDK Runtime Environment (build 1.8.0_112-release-b06)

[✓] IntelliJ IDEA Ultimate Edition (version 2017.3)
    • Flutter plugin version 20.0.3
    • Dart plugin version 173.3727.108

[✓] Connected devices
    • iPhone X • 9500EA8E-1292-4223-BFFF-1B2134D5C47C • ios • iOS 11.2 (simulator)
annoyance material design framework
مصدر
picture DirkWillem
👍60

التعليق الأكثر فائدة

إذا لم تفهم كيفية إصلاحها:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
picture eshinkawa في ١٠ أغسطس ٢٠١٨
👍184 ❤44 🎉34 🚀20

ال 21 كومينتر

/ سم مكعب xster

cbracken picture cbracken في ١٩ ديسمبر ٢٠١٧

ccHansMuller ، أتذكر بشكل غامض أنني رأيت خطأً أقدم حول هذا الأمر ولكن لا يمكنني العثور عليه

xster picture xster في ١٩ ديسمبر ٢٠١٧

عند استخدام BottomNavigationBarType.fixed لا بأس بذلك ， ولكن عند استخدام BottomNavigationBarType.

flyou picture flyou في ٢٦ ديسمبر ٢٠١٧
👍94 ❤21 🎉16 🚀9

أنا أيضا لدي هذه المشكلة. أي شخص يعرف كيفية إصلاح هذا؟

wiltwitt picture wiltwitt في ١٦ فبراير ٢٠١٨

نفس المشكلة بالنسبة لي

chusmf picture chusmf في ٨ مارس ٢٠١٨

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

Hixie picture Hixie في ٩ مارس ٢٠١٨

عندما يتم توفير أكثر من 3 عناصر BottomNavigationBar ، يتغير النوع ، إذا لم يتم تحديده ، إلى BottomNavigationBarType.shifting لكل https://docs.flutter.io/flutter/material/BottomNavigationBar/BottomNavigationBar.html. يجب تسليط الضوء على هذه المعلومات الصغيرة في مستند الفصل. من السهل التغاضي عن مكانه (لقد أغفلته).

عندما يكون نوع BottomNavigationBar هو BottomNavigationBarType.shifting ، يتم عرض نص العناصر والرموز باللون الأبيض ، عبر DefaultTextStyle و IconTheme. من المفترض أن يتم تحديد BottomNavigationBarItem.backgroundColor كلون متباين. من الواضح أن هذا محير.

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

يجب تحسين المستند الخاص بـ BottomNavigationBar و NavigationBarItem.

HansMuller picture HansMuller في ٩ مارس ٢٠١٨
👍103 ❤25 🎉10

HansMuller شكرا ، هذا نجح!

wiltwitt picture wiltwitt في ١٠ مارس ٢٠١٨

تضمين التغريدة

tygryk picture tygryk في ١٩ أبريل ٢٠١٨

إذا لم تفهم كيفية إصلاحها:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
eshinkawa picture eshinkawa في ١٠ أغسطس ٢٠١٨
👍184 ❤44 🎉34 🚀20

هل أنا الوحيد الذي يعتقد أنه لا ينبغي تغيير السلوك بناءً على عدد علامات التبويب تلقائيًا؟
لا يبدو لي أمرًا بديهيًا أن أتوقع سلوكًا مختلفًا.

ThinkDigitalSoftware picture ThinkDigitalSoftware في ١١ أغسطس ٢٠١٨
👍43 ❤2

شكرا 👍

bachtiaryayan picture bachtiaryayan في ٨ سبتمبر ٢٠١٨

شكرا.

creative-junk picture creative-junk في ١٩ سبتمبر ٢٠١٨

ماذا أفعل ، إذا كنت لا أريد أن تكون الأيقونات بيضاء ، ومع ذلك يجب أن يكون لها سلوك التحول؟

dmorawetz picture dmorawetz في ٢٥ سبتمبر ٢٠١٨

لماذا لا تجعل فقط النوع الافتراضي. ثابت؟

mliitfall picture mliitfall في ٢٥ أكتوبر ٢٠١٨
👍4

أعلم أن هذه المشكلة قد تم إغلاقها لكنها لا تزال تبدو وكأنها خطأ على الرغم من تحديث الوثائق بشكل جيد.
أقترح إصلاح الإعداد الافتراضي أو إصلاح سلوك BottomNavigationBarType.shifting بأربعة عناصر.

JPM84 picture JPM84 في ٢ مارس ٢٠١٩
👍20

لقد قدمت "backgroundColor" agrument لكل "BottomNavigationBarItem" وتم حل المشكلة.

nikhilmeria picture nikhilmeria في ١٠ يناير ٢٠٢٠
👍3

تمكنت من حل المشكلة عن طريق الدخول إلى showUnselectedLabels: true property ، في BottomNavigationBar

إرجاع BottomNavigationBar الجديد (

  showUnselectedLabels: true,

  items: <BottomNavigationBarItem>[...
SilvaEngComp picture SilvaEngComp في ١٣ فبراير ٢٠٢٠

ما الذي لا نريده أن يتغير السلوك إذا كان لدينا أكثر من ثلاثة عناصر. هل هناك أي عمل حولها؟

Mahn00rMalik picture Mahn00rMalik في ٢٨ أبريل ٢٠٢٠

add showUnselec tedLabels: صحيح لـ BottomNavigationBar
إضافة backgroundColor: Colors.blue إلى BottomNavigationBarItem
ثم يظهر كل شيء

SharkLib picture SharkLib في ١ مايو ٢٠٢٠
👍1

هل أنا الوحيد الذي يعتقد أنه لا ينبغي علي تغيير السلوك بناءً على عدد علامات التبويب تلقائيًا؟
لا يبدو لي أمرًا بديهيًا أن أتوقع سلوكًا مختلفًا.

هذا رأيي أيضا

Quiqueitc picture Quiqueitc في ٢٣ مايو ٢٠٢٠
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

najeira picture najeira  ·  3تعليقات
sethladd picture sethladd  ·  3تعليقات
Hixie picture Hixie  ·  3تعليقات
drewwarren picture drewwarren  ·  3تعليقات
ppolasek picture ppolasek  ·  3تعليقات