【问题标题】:Flutter Bottomtab Navigator How to Carry It to New Page?Flutter Bottom Tab Navigator 如何携带到新页面?
【发布时间】:2021-10-10 22:08:30
【问题描述】:

如何使用 A、B、C、D 中的底部标签?如您所见,我为底部标签创建了 4 个额外页面。主页、搜索、书籍、消息和个人资料。我想当我进入“A”页面时,我的标签丢失了。我怎样才能将它带到页面上?这段代码有什么解决方案?如果您愿意,我可以分享其他页面的代码,但其中只有一个文本。所以我分享标签导航器代码和图像,以便您可以更轻松地提供帮助。提前感谢您的帮助。 任何人 ? :/

import 'package:flutter/material.dart';
import 'package:tahand/components/apage.dart';
import 'package:tahand/components/bpage.dart';
import 'package:tahand/components/cpage.dart';
import 'package:tahand/components/dpage.dart';


class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("My App"),automaticallyImplyLeading: false,
        backgroundColor: Colors.black54,
      ),
      body: SafeArea(
        child: Stack(
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 550.0),
              child: Center(
                child: Container(
                    width: 200,
                    height: 150,
                    child: Image.asset('assets/images/logo.png')),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(
                  left: 15.0, right: 15.0, top: 0, bottom: 250),
              child:Center(
                child : new Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children:[
                    Container(
                      height: 80,
                      width: 150,
                      decoration: BoxDecoration(
                          color: Colors.black54, borderRadius: BorderRadius.circular(10)),
                      child: TextButton(
                        onPressed: () {
                          Navigator.push(
                              context, MaterialPageRoute(builder: (_) => Apage()));
                        },
                        child: Text(
                          'A',
                          style: TextStyle(color: Colors.white, fontSize: 25),
                        ),
                      ),
                    ),
                    SizedBox(width: 20),
                    Container(
                      height: 80,
                      width: 150,
                      decoration: BoxDecoration(
                          color: Colors.black54, borderRadius: BorderRadius.circular(10)),
                      child: TextButton(
                        onPressed: () {
                          Navigator.push(
                              context, MaterialPageRoute(builder: (_) => Bpage()));
                        },
                        child: Text(
                          'B',
                          style: TextStyle(color: Colors.white, fontSize: 25),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only  (left: 20.0, right: 15.0, top: 560, bottom: 0),
              child: Container(
                height: 80,
                width: 380,
                decoration: BoxDecoration(
                    color: Colors.black, borderRadius: BorderRadius.circular(10)),
                child: TextButton(
                  onPressed: () {
                    Navigator.push(
                        context, MaterialPageRoute(builder: (_) => Dpage()));
                  },
                  child: Text(
                    'D',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ),
              ),
            ),
            new Padding(
              padding: const EdgeInsets.only  (left: 125.0, right: 15.0, top: 320, bottom: 0),
              child: Container(
                height: 80,
                width: 150,
                decoration: BoxDecoration(
                    color: Colors.black54, borderRadius: BorderRadius.circular(10)),
                child: TextButton(
                  onPressed: () {
                    Navigator.push(
                        context, MaterialPageRoute(builder: (_) => Cpage()));
                  },
                  child: Text(
                    'C',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),

    );
  }
}



【问题讨论】:

  • 在底部导航栏试试我的答案stackoverflow.com/a/68452764/13997210
  • 你能告诉我我的代码上的答案吗?因为我是 Flutter 的初学者,所以我无法从另一个示例中得到它。谢谢。

标签: flutter flutter-layout flutter-bottomnavigation


【解决方案1】:

开始,

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.orange,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.call), label: 'Call'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: 'Message'),
        ],
      ),
      body: Navigator(
        onGenerateRoute: (settings) {
          Widget page = Page1();
          if (settings.name == 'page2') page = Page2();
          return MaterialPageRoute(builder: (_) => page);
        },
      ),
    );
  }
}

然后添加如下两个页面,//i am using only two pages now for refrence

第一页:

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page1')),
      body: Center(
        child: RaisedButton(
          onPressed: () => Navigator.pushNamed(context, 'page2'),
          child: Text('Go to Page2'),
        ),
      ),
    );
  }
} 

第二页:

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: Text('Page2')));
}

【讨论】:

  • 你能告诉我我的代码上的答案吗?因为我是 Flutter 的初学者,所以我无法从另一个示例中得到它。谢谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-06-22
  • 2021-02-12
  • 2020-02-06
  • 2020-12-09
  • 1970-01-01
  • 1970-01-01
  • 2022-12-13
相关资源
最近更新 更多