Android studio 颤振：多材质小部件

[！[enter image description here][1][1]这是一个有点初级的问题，但我已经搞乱它很长时间了，环顾四周都找不到答案

我使用的是颤振框架，我正在尝试运行多个无状态小部件，一个底部导航栏和一个顶部应用栏来保存菜单和其他导航按钮。 我正在努力让两者同时运行，我找不到一种方法来运行它们。 目前，当我调用

home:MyBottomNavigationBar

时，只会显示这个，而不会显示另一个（有意义），但是什么命令或解决方案可以帮助我运行多个小部件呢？我尝试了很多不同的方法来使用家，但似乎都不管用。 我的代码非常简单。只需在main.dart中使用stf创建导航栏和应用栏

如果需要，我可以附加代码，但希望我的问题足够清楚

在Xamarin中完成，我可以轻松地在顶部同时拥有底部导航栏和两个导航按钮。 [1] :

Widgets文件夹中的BottomNavBar.dart

导入'dart:io'；
类MyBottomNavigationBar扩展StatefulWidget
{
@凌驾
MyBottomNavigationBarState createState（）=>MyBottomNavigationBarState（）；
}
类MyBottomNavigationBarState扩展了状态
{
int _currentIndex=0；
儿童最终名单=
[
首页（），
ExplorePage（），
ProgressPage（），
ChallengesPage（），
ProfilePage（），
];
void onTappedBar（整数索引）
{
设置状态（）{
_currentIndex=索引；
});
}
@凌驾
小部件构建（构建上下文）
{
归还新脚手架
(
正文：_children[_currentIndex]，
底部导航栏：底部导航栏
(
onTap:onTappedBar，
currentIndex:_currentIndex，
项目：
[
底部导航气压计
(
背景颜色：Colors.pinkAccent，
图标：新图标（Icons.home，
颜色：颜色。黑色），
标签：“提要”，
//activeBackgroundColor:Colors.red，//这是更改
)，

请将代码放在这里，这会很有帮助。我个人不明白您想要实现什么。每个无状态/有状态都有一个生成方法，它返回一个小部件（有自己的生成方法）。但是，因为有些小部件可以有多个子部件（行、列、堆栈），您可以使用预构建的布局组合，然后将其装载到小部件树中。 或者，只需通过扩展CustomMultiChildLayout来使用自定义布局，也可以使用“覆盖”-ing，根据事件或状态直接在画布上绘制。 ||||||||||||

新答案：

我试图复制图像，基本上你需要使用scaffold的appBar和bottomNavigationBar属性。appBar扩展了PreferredSizedWidget，因此你可以轻松创建自己的

主飞镖

 void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    MyBottomNavigationBar();
    return MaterialApp(
      title: _title,
      home: HomePage(),
    );
  }
}

主页

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter version"),
        actions: [
          IconButton(icon: Icon(Icons.menu), onPressed: () {}),
          IconButton(icon: Icon(Icons.account_circle), onPressed: () {}),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue,
        items: [
          BottomNavigationBarItem(
            backgroundColor: Colors.pinkAccent,
            icon: new Icon(Icons.home, color: Colors.black),
            label: 'Feed',
            //activeBackgroundColor: Colors.red, // this is the change
          ),
          BottomNavigationBarItem(
            backgroundColor: Colors.pinkAccent,
            icon: new Icon(Icons.home, color: Colors.black),
            label: 'Feed',
            //activeBackgroundColor: Colors.red, // this is the change
          ),
        ],
      ),
      body: Column(
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height/7,
            color: Colors.blue,
            child: Center(child: Text("Challenges Page",style: TextStyle(fontSize: 41,color: Colors.white),),),
          ),
        ],
      ),
    );
  }
}

类主页扩展StatefulWidget{
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“颤振版本”），
行动：[
图标按钮（图标：图标（Icons.menu），按下：（{}），
图标按钮（图标：图标（Icons.account_circle），按下：（{}），
],
),
底部导航栏：底部导航栏(
背景颜色：Colors.blue，
项目：[
底部导航气压计(
背景颜色：Colors.pinkAccent，
图标：新图标（Icons.home，颜色：Colors.black），
标签：“提要”，
//activeBackgroundColor:Colors.red，//这是更改
),
底部导航气压计(
背景颜色：Colors.pinkAccent，
图标：新图标（Icons.home，颜色：Colors.black），
标签：“提要”，
//activeBackgroundColor:Colors.red，//这是更改
),
],
),
正文：专栏(
儿童：[
容器(
宽度：MediaQuery.of（context）.size.width，
高度：MediaQuery.of（context）.size.height/7，
颜色：颜色，蓝色，
child:Center（child:Text（“挑战页面”，样式：TextStyle（fontSize:41，颜色：Colors.white）），），
),
],
),
);
}
}

假设你想从头开始创建布局，不想使用scaffold的属性。代码blow与stack是同一个布局，但我并没有使它漂亮，它只是显示布局，而没有重构任何小部件

home_page.dart的代码（main.dart与上面相同）

类主页扩展StatefulWidget{
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：安全区(
子：容器(
宽度：MediaQuery.of（context）.size.width，
高度：MediaQuery.of（context）.size.height，
子：堆栈(
儿童：[
容器(
宽度：MediaQuery.of（context）.size.width，
高度：MediaQuery.of（context）.size.height/12，
装饰：盒子装饰(
颜色：颜色，蓝色，
boxShadow：[
BoxShadow（颜色：Colors.black54，模糊半径：2，扩展半径：.1，偏移量：偏移量（0,2）），
],
),
孩子：排(
mainAxisAlignment:mainAxisAlignment.spaceBetween，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
划船(
儿童：[
填充物(
填充：常数边集全部（18.0），
子项：文本（“仅堆叠”，样式：TextStyle（fontSize:21，颜色：Colors.white），），
),
],
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Stack(
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height/12,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  boxShadow: [
                    BoxShadow(color: Colors.black54,blurRadius: 2,spreadRadius: .1,offset: Offset(0, 2)),
                  ],
                ),

                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(

                      children: [
                        Padding(
                          padding: const EdgeInsets.all(18.0),
                          child: Text("just stack",style: TextStyle(fontSize: 21,color: Colors.white),),
                        ),
                      ],
                    ),
                    Row(
                      children: [
                        IconButton(icon: Icon(Icons.account_circle,size: 32,), onPressed: (){}),IconButton(icon: Icon(Icons.settings,size: 32,), onPressed: (){}),
                      ],
                    ),


                  ],
                ),
              ),
              Positioned(
                top: MediaQuery.of(context).size.height/12+1,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height/10,
                  color: Colors.blue,
                  child: Center(child: Text("Challenges Page",style: TextStyle(fontSize: 31,color: Colors.white),)),
                ),
              ),
              Positioned(
                bottom:0,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height/12,
                  color: Colors.blue,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Column(
                        children: [
                          IconButton(icon: Icon(Icons.home,size: 32,), onPressed: (){}),
                          Text("home"),
                        ],
                      ),
                      IconButton(icon: Icon(Icons.account_circle,size: 32,), onPressed: (){}),
                      IconButton(icon: Icon(Icons.settings,size: 32,), onPressed: (){}),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}