כרטיסיות עם סרגל ניווט
חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 23 מתוך 33.
אפליקציות רבות מציגות את הדפים הראשיים שלהן בכרטיסיות לאורך תחתית המסך. NavigationBar מצייר אותן; מעבירים אותו אל bottomNavigationBar: של Scaffold.
NavigationBar(
selectedIndex: index,
onDestinationSelected: (int i) {
setState(() {
index = i;
});
},
destinations: const [
NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
],
)כל NavigationDestination היא כרטיסייה אחת, עם סמל ותווית. selectedIndex מציין איזו כרטיסייה מודגשת, כשהספירה מתחילה ב-0. כשמקישים על כרטיסייה, onDestinationSelected מקבל את האינדקס שלה.
הסרגל אינו זוכר את הכרטיסייה בעצמו: שומרים את index במצב ומשנים אותו באמצעות setState. גוף המסך מציג את הדף המתאים לאינדקס הזה, במקרה הזה pages[index] מתוך רשימת רכיבי ממשק.
אתגר
קלבסרגל יש שלוש לשוניות, אבל הקשה עליהן לא עושה דבר. הוסף onDestinationSelected: כדי שלשונית שעליה מקישים תודגש והעמוד שלה יוצג: Favorites page עבור Favorites, Settings page עבור Settings.
נסו בעצמכם
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int index = 0;
final List<Widget> pages = const [
Center(child: Text('Home page')),
Center(child: Text('Favorites page')),
Center(child: Text('Settings page')),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('My App')),
body: pages[index],
bottomNavigationBar: NavigationBar(
selectedIndex: index,
destinations: const [
NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
NavigationDestination(icon: Icon(Icons.favorite), label: 'Favorites'),
NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה רשימות ומסכים
6כרטיסיות, מגירות והחלקות
כרטיסיות עם סרגל ניווטאייקונים מלאים לכרטיסייה הפתוחהמגירה צדדיתהחלקה למחיקהביטול החלקהתרגלו בעצמכם: קומפיילר Flutter אונליין