【问题标题】:read data in panel sliding up panel flutter读取面板中的数据滑动面板颤动
【发布时间】:2021-10-16 10:09:01
【问题描述】:

我在主课中使用了 SlidingUpPanel。 在主类中,我有一个底部工作表,然后单击底部工作表图标,加载页面。 现在,当我必须使用 SlidingUpPanel 时,我在正文中加载页面时遇到问题。 谁能帮助我如何在 SlidingUpPanel 的正文中加载底部导航的页面?

 Widget build(BuildContext context) {
    var pageWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      body: SlidingUpPanel(
        controller: _pc,
        panelBuilder: (sc) {
          if (!isCollapsed) _pc.hide();
          return Container(
            child: Center(child: Text("Panel")),
          );
        },

        body: //here I want to load click bottom navigation page
),

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
 onTap: (index) {
          switch (index) {
            case 0:
              {
                Navigator.pushReplacementNamed(context, '/'); 
                break;
              }
            case 1:
              {
                Navigator.pushNamed(context, '/search');

                break;
              }
            case 2:
              {
                Navigator.pushNamed(context, '/library');
                break;
              }
            case 3:
              {
                Navigator.pushNamed(context, '/profile');
                break;
              }
          }
        },           
items[...]   
   ),
    );
  }

有人可以帮帮我吗?

【问题讨论】:

    标签: flutter dart panel bottom-sheet flutter-bottomnavigation


    【解决方案1】:

    试试下面的代码,你可以根据BottomNavigationBar项目点击来改变页面

        import 'package:flutter/material.dart';
        import 'package:sliding_up_panel/sliding_up_panel.dart';
    
        void main() {
          runApp(MyApp());
        }
    
        class MyApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              title: 'Flutter Demo',
              theme: ThemeData(
                primarySwatch: Colors.blue,
              ),
              home: MyHomePage(title: 'Flutter Demo Home Page'),
            );
          }
        }
    
        class MyHomePage extends StatefulWidget {
          MyHomePage({Key? key, required this.title}) : super(key: key);
    
          final String title;
    
          @override
          _MyHomePageState createState() => _MyHomePageState();
        }
    
        class _MyHomePageState extends State<MyHomePage> {
          final widgets = [
            Container(color: Colors.red),
            Container(color: Colors.green),
            Container(color: Colors.yellow),
          ];
          int currentIndex = 0;
    
          @override
          void initState() {
            super.initState();
          }
    
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(
                title: Text(widget.title),
              ),
              body: SlidingUpPanel(
                panel: Center(
                  child: Text("This is the sliding Widget"),
                ),
                body: widgets[currentIndex],
              ),
              bottomNavigationBar: BottomNavigationBar(
                items: [
                  BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.settings), label: 'Settings'),
                  BottomNavigationBarItem(icon: Icon(Icons.person), label: 'About'),
                ],
                currentIndex: currentIndex,
                onTap: (index) {
                  setState(() {
                    currentIndex = index;
                  });
                },
              ),
            );
          }
        }
    

    【讨论】:

    • 我怎么能在小部件列表中调用这样的东西 -> Navigator.pushReplacementNamed(context, '/');?我有一堂课 Map&lt;String, WidgetBuilder&gt; routes = &lt;String, WidgetBuilder&gt;{ '/': (context) =&gt; const ExplorePage(), '/search': (context) =&gt; const SearchPage(), '/library': (context) =&gt; const LibraryPage(), '/profile': (context) =&gt; const ProfilePage(), };
    • 路由与小部件不同。通过使用路由,您可以导航到上面示例中的小部件中的不同页面,您可以替换它们。
    • 好的,如何在小部件中调用类? ExplorePage(), SearchPage(), LibraryPage(), ProfilePage(),
    • 最终小部件 = [ ExplorePage(), SearchPage(), LibraryPage(), ProfilePage(), ];
    • 我这样做。但不能工作并在编译器中滚动。
    猜你喜欢
    • 2020-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-06
    相关资源
    最近更新 更多