卡片小部件中的TabBar导航

Question

我有一个使用Scaffold和底部导航的主页。在Scaffold的主体中，我有一个包含2个Card Widgets的页面。我正在尝试实现一个＆＃34; sub＆＃34; tabBar导航为第二张卡独立于底部导航。有没有办法为Card小部件实现标签栏导航？我尝试过使用Scaffold但是标签栏的高度太大了。从文档来看，这似乎是由于灵活的空间Widget，但我还没有找到消除/扩展它的方法，指针将不胜感激。

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(home: new MyTabs()));
}

class MyTabs extends StatefulWidget {
  @override
  MyTabsState createState() => new MyTabsState();
}

class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin {
  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text("Pages"),
            backgroundColor: Colors.deepOrange,
            ),
        bottomNavigationBar: new Material(
            color: Colors.deepOrange,
            child: new TabBar(controller: controller, tabs: <Tab>[
              new Tab(icon: new Icon(Icons.arrow_forward)),
              new Tab(icon: new Icon(Icons.arrow_downward)),
              new Tab(icon: new Icon(Icons.arrow_back)),
            ])),
        body: new TabBarView(controller: controller, children: <Widget>[
          new First(),
          new Second(),
          new Third()
        ]));
  }
}
class First extends StatefulWidget {
  @override
  FirstState createState() => new FirstState();
}

class FirstState extends State<First> with SingleTickerProviderStateMixin {
  TabController controller1;

  @override
  void initState() {
    super.initState();
    controller1 = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    controller1.dispose();
    super.dispose();
  }



  @override
  Widget build(BuildContext context) {
    return new Column(children: [
      new Expanded(
        child: new Card(
            child: new Center(
                child: new Icon(Icons.favorite,
                    size: 150.0, color: Colors.redAccent))),
      ),
      new Expanded(child: new Card(
          child: new Center(
              child: new Container(
                  child: new Scaffold(
                      appBar: new AppBar(
                          bottom: new TabBar(
                              controller: controller1,
                              tabs: <Tab>[
                                new Tab(icon: new Icon(Icons.arrow_forward)),
                                new Tab(icon: new Icon(Icons.arrow_downward)),
                                new Tab(icon: new Icon(Icons.arrow_back)),
                              ]
                          )),
                      body: new TabBarView(
                          controller: controller1,
                          children: <Widget>[
                            new Text("Hello"),
                            new Text("world"),
                            new Text("Hi")
                          ]
                      )
                  )
              )
          ))),
    ]);
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
        child: new Center(
            child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent)
        )
    );
  }
}

class Third extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
        child: new Center(
            child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent)
        )
    );
  }
}

代码已从here

修改

Answer 1

此代码应该按照您的意愿执行。您不需要使用嵌套的Scaffold或AppBar，只需要一个简单的Column。

另外，您可能需要考虑BottomNavigationBar TabBar，因为import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp(home: new MyTabs())); } class MyTabs extends StatefulWidget { @override MyTabsState createState() => new MyTabsState(); } class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin { TabController controller; @override void initState() { super.initState(); controller = new TabController(vsync: this, length: 3); } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Pages"), backgroundColor: Colors.deepOrange, ), bottomNavigationBar: new Material( color: Colors.deepOrange, child: new TabBar(controller: controller, tabs: <Tab>[ new Tab(icon: new Icon(Icons.arrow_forward)), new Tab(icon: new Icon(Icons.arrow_downward)), new Tab(icon: new Icon(Icons.arrow_back)), ])), body: new TabBarView(controller: controller, children: <Widget>[ new First(), new Second(), new Third() ])); } } class First extends StatefulWidget { @override FirstState createState() => new FirstState(); } class FirstState extends State<First> with SingleTickerProviderStateMixin { TabController controller1; @override void initState() { super.initState(); controller1 = new TabController(vsync: this, length: 3, initialIndex: 0); } @override void dispose() { controller1.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return new Column(children: [ new Expanded( child: new Card( child: new Center( child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent))), ), new Expanded( child: new Card( child: new Column( children: <Widget>[ new Expanded( child: new TabBarView( controller: controller1, children: <Widget>[ new Text("Hello"), new Text("world"), new Text("Hi") ] ), ), new Container( color: Colors.blue, child: new TabBar( controller: controller1, tabs: <Tab>[ new Tab(icon: new Icon(Icons.arrow_forward)), new Tab(icon: new Icon(Icons.arrow_downward)), new Tab(icon: new Icon(Icons.arrow_back)), ] ), ), ], ), ) ), ]); } } class Second extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( child: new Center( child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent) ) ); } } class Third extends StatelessWidget { @override Widget build(BuildContext context) { return new Container( child: new Center( child: new Icon(Icons.favorite, size: 150.0, color: Colors.redAccent) ) ); } } 是一个材质小部件，通常会显示在其导航的内容之上。

SELECT t1.name AS product_name,
       t1.description AS product_description,
       GROUP_CONCAT(t2.name) AS product_category
FROM table1 t1 INNER JOIN
     table3 t3
     ON t3.product_id = t1.product_id INNER JOIN
     table2 t2
     ON t2.category_id = t3.category_id
GROUP BY t1.name, t1.description;