flutter - 小部件问题 - 没有像我想要的那样显示

问题描述

我开始学习 Dart 和 Flutter。为此，我尝试编写代码。现在，我被自己创建的小部件困住了。波纹管您将看到我创建的可重用代码：

抽屉：这个有效
应用栏：这个有效
列表视图：这个有效
BottomNavigationBar：这个有效
标签栏：这个有效

我的问题是当我调用一个页面时，我想调用每个小部件的类。Drawer & App-Bar & Listview => 它有效。它们都显示得很好。如果我将 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,
              minHeight: iconSize+5,
              maxWidth: iconSize+5,
              maxHeight: iconSize+5,
              ),
              child: Image.asset(buttonTwoIcon, fit: BoxFit.cover),),
              title: new Text(buttonTwo),

          ),


          BottomNavigationBarItem(
              icon: ConstrainedBox(
                constraints: BoxConstraints(
                  minWidth: iconSize+5,
                  minHeight: iconSize+5,
                  maxWidth: iconSize+5,
                  maxHeight: iconSize+5,
                ),
                child: Image.asset(buttonThreeIcon, fit: BoxFit.cover),),
              title: Text(buttonThree)
          ),

          BottomNavigationBarItem(
              icon: ConstrainedBox(
                constraints: BoxConstraints(
                  minWidth: iconSize+5,
                  minHeight: iconSize+5,
                  maxWidth: iconSize+5,
                  maxHeight: iconSize+5,
                ),
                child: Image.asset(buttonFourIcon, fit: BoxFit.cover),),
              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"),
    ),
    TabNavigationItem(
      page: Clarify(),
      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();
  }
}

标签： flutterwidgetflutter-layout

解决方案

我认为您的应用程序结构是错误的。在你的Clarify.dart你有一个脚手架小部件，它有：

bottomNavigationBar: MyBottomBar(),

但是在你的MyBottomBar.dart你有另一个 Scaffold 小部件，它又有另一个 bottomNavigationBar

  bottomNavigationBar: BottomNavigationBar(
  ...

这是重复使用的正确方法BottomNavigationBar

主要.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(),
      ),
    );
  }
}

你的底部导航.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)),
      ],
    );
  }
}

flutter - 小部件问题 - 没有像我想要的那样显示

问题描述

解决方案

推荐阅读