问题描述
我从学习Dart和Flutter开始。为此，我尝试编写代码。 现在，我被我创建的小部件所困扰。 在下面，您将看到代码 我创建了一个可重用的：
我的问题是，当我调用页面时，我想调用每个小部件的类。 抽屉和应用程序栏和列表视图=>它起作用。它们都很好地显示。 如果要向其添加BottomBar，则只能看到BottomBar。我想所有其余的东西都隐藏在下面。
请让我看看下面的源代码，让我知道我所缺少的内容吗？ 非常感谢。
//==============This is the code for myAppBar=============================
import 'package:Flutter/material.dart';
//Creation d'un Widget AppBar qui sera importé dans un Scaffold des autres pages
class CustomAppBar extends StatelessWidget with PreferredSizeWidget {
@override
final Size preferredSize;
final String title;
CustomAppBar(
this.title,{ Key key,}) : preferredSize = Size.fromHeight(50.0),super(key: key);
@override
Widget build(BuildContext context) {
return AppBar(
title: Text(
title,style: TextStyle(color: Colors.white),),backgroundColor: Colors.blue,elevation: 5,automaticallyImplyLeading: true,);
}
}
//==========================end of myAppBar=======================
//=====================myBottomNavigationBar=======================
import 'package:Flutter/material.dart';
//Const utilisées par bottomNavigationBar pour indiquer à quoi sert chaque icones
const String buttonOne = "One";
const String buttonTwo = "two";
const String buttonThree = "three";
const String buttonFour = "Four";
const String buttonOneIcon = "assets/icons/1.png";
const String buttonTwoIcon = "assets/icons/2.png"; // A MODIFIER CHANGER ICONS
const String buttonThreeIcon = "assets/icons/3.png";
const String buttonFourIcon = "assets/icons/4.png";// A MODIFIER CHANGER ICONS
//Creation d'un Widget AppBar qui sera importé dans un Scaffold des autres pages
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyBottomBar(),);
}
}
class MyBottomBar extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyBottomBarState();
}
}
class _MyBottomBarState extends State<MyBottomBar> {
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0,// this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: ConstrainedBox(
constraints: BoxConstraints(
minWidth: iconSize+5,minHeight: iconSize+5,maxWidth: iconSize+5,maxHeight: iconSize+5,child: Image.asset(buttonOneIcon,fit: BoxFit.cover),title: new Text(buttonOne),BottomNavigationBarItem(
icon: ConstrainedBox(
constraints: BoxConstraints(
minWidth: iconSize+5,child: Image.asset(buttonTwoIcon,title: new Text(buttonTwo),BottomNavigationBarItem(
icon: ConstrainedBox(
constraints: BoxConstraints(
minWidth: iconSize+5,child: Image.asset(buttonThreeIcon,title: Text(buttonThree)
),child: Image.asset(buttonFourIcon,title: Text(buttonFour)
)
],type: BottomNavigationBarType.fixed,);
}
/==============================end of myBottomNavigationBar=========================
//========================myListView============
import 'package:Flutter/material.dart';
class MyListView extends StatelessWidget {
List<String> listItems = List<String>.generate(15,(i) => "List Item $i");
@override
Widget build(BuildContext context) {
return Scaffold(
body:ListView.builder(
itemCount: listItems.length,itemBuilder: (context,index){
return Padding(
padding: const EdgeInsets.all(10.0),child: Column(
children: <Widget>[
ListTile(
leading: Icon(Icons.snooze,size: 40,title: Column(
crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
Text('${listItems[index]}',style: TextStyle(fontSize: 16),Text('This is sub heading',style: TextStyle(fontSize: 14,color: Colors.grey),)
],trailing: Icon(Icons.fast_forward),Divider()
],);
},)
);
}
}
//==============================end of myListView============================
//==========================myTabBar================
import 'package:Flutter/material.dart';
class TabsPage extends StatefulWidget {
@override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _currentIndex,children: <Widget>[
for (final tabItem in TabNavigationItem.items) tabItem.page,],bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,onTap: (int index) => setState(() => _currentIndex = index),items: <BottomNavigationBarItem>[
for (final tabItem in TabNavigationItem.items)
BottomNavigationBarItem(
icon: tabItem.icon,title: tabItem.title,);
}
}
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({
@required this.page,@required this.title,@required this.icon,});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Clarify(),icon: Icon(Icons.home),title: Text("Home"),TabNavigationItem(
page: Clarify(),icon: Icon(Icons.shopping_basket),title: Text("Shop"),icon: Icon(Icons.search),title: Text("Search"),];
}
//===============end of myTabBar=============================
//=======Page where I am using the reusable widget===========
import 'package:Flutter/material.dart';
import 'package:Flutter/cupertino.dart';
import
var Titre = "HOME";
class Clarify extends StatefulWidget {
@override
_ClarifyState createState() => _ClarifyState();
}
class _ClarifyState extends State<Clarify> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new CustomAppBar(Titre),drawer: MyMenu(),body: new FirstTab(),bottomNavigationBar: MyBottomBar(),//if I deactivate bootommNavigationBar:MyBottomBar using "//",then,the appBar,the drawer and the tab are displayed. If I am adding the bottomNavigationBar,I only can see the BottomNavigationBar.
);
//
// throw UnimplementedError();
}
}
解决方法
我认为您的应用程序结构错误。在您的Clarify.dart中，您有一个脚手架小部件，其中包含：
bottomNavigationBar: MyBottomBar(),但是在您的MyBottomBar.dart中，您有另一个Scaffold小部件，该小部件又具有另一个bottomNavigationBar
bottomNavigationBar: BottomNavigationBar(
...
这是重用BottomNavigationBar
main.dart
import 'package:flutter/material.dart';
import 'package:sof/bnb.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',home: Scaffold(
body: Text("Some Widget"),bottomNavigationBar: MyBottomBar(),),);
}
}
your-bottom-navigation.dart
import 'package:flutter/material.dart';
//Const utilisées par bottomNavigationBar pour indiquer à quoi sert chaque icones
const String buttonOne = "One";
const String buttonTwo = "two";
const String buttonThree = "three";
const String buttonFour = "Four";
const String buttonOneIcon = "assets/icons/1.png";
const String buttonTwoIcon = "assets/icons/2.png"; // A MODIFIER CHANGER ICONS
const String buttonThreeIcon = "assets/icons/3.png";
const String buttonFourIcon = "assets/icons/4.png"; // A MODIFIER CHANGER ICONS
//Creation d'un Widget AppBar qui sera importé dans un Scaffold des autres pages
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyBottomBar(),);
}
}
class MyBottomBar extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyBottomBarState();
}
}
class _MyBottomBarState extends State<MyBottomBar> {
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: 0,// this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit),title: Text(buttonOne)),BottomNavigationBarItem(
icon: Icon(Icons.access_alarms),title: Text(buttonTwo)),],);
}
}