flutter - 我需要在选项卡中添加一些东西 我应该在代码中的什么地方添加

Question

如果我需要在选项卡中添加一些文本，我应该在哪里添加选项卡屏幕在下面的代码中，我有三个选项卡，我希望这些选项卡显示不同的屏幕。

类 Manu_screen 扩展了 StatelessWidget {

最终 map 猫；

Manu_screen({Key key, this.cat}) : super(key: key);

@覆盖

小部件构建(BuildContext 上下文){

var _tabs = new List<String>(3);
_tabs[0] = "Non Veg";
_tabs[1] = "Veg";
_tabs[2] = "Snacks";
return new Container(
  decoration: new BoxDecoration(color: Colors.white),
  child:  DefaultTabController(
      length: _tabs.length,
      child: NestedScrollView(
          headerSliverBuilder:(BuildContext context, bool innerBoxIsScrolled){
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                child: SliverAppBar(

                  title:  Text(cat["name"],style: TextStyle(
                    color: Color(0xffff3d00),
                    fontSize: 20,
                    fontWeight: FontWeight.bold,

                  ),),
                  pinned: true,
                  expandedHeight: 300.0,
                  forceElevated: innerBoxIsScrolled,
                  flexibleSpace: FlexibleSpaceBar(
                      centerTitle:true,
                      background:Image.asset(
                        cat["img"],
                        fit: BoxFit.cover,
                      ),
                  ),
                bottom: TabBar(
                  tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ),

            ];
          },
        body: TabBarView(
          children: _tabs.map((String name) {
            return SafeArea(
              top: false,
              bottom: false,
              child: Builder(
                // This Builder is needed to provide a BuildContext that is "inside"
                // the NestedScrollView, so that sliverOverlapAbsorberHandleFor() can
                // find the NestedScrollView.
                builder: (BuildContext context) {
                  return CustomScrollView(
                    // The "controller" and "primary" members should be left
                    // unset, so that the NestedScrollView can control this
                    // inner scroll view.
                    // If the "controller" property is set, then this scroll
                    // view will not be associated with the NestedScrollView.
                    // The PageStorageKey should be unique to this ScrollView;
                    // it allows the list to remember its scroll position when
                    // the tab view is not on the screen.
                    key: PageStorageKey<String>(name),
                    slivers: <Widget>[
                      SliverOverlapInjector(
                        // This is the flip side of the SliverOverlapAbsorber above.
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                      ),
                      SliverPadding(
                        padding: const EdgeInsets.all(8.0),
                        // In this example, the inner scroll view has
                        // fixed-height list items, hence the use of
                        // SliverFixedExtentList. However, one could use any
                        // sliver widget here, e.g. SliverList or SliverGrid.
                        sliver: SliverFixedExtentList(
                          // The items in this example are fixed to 48 pixels
                          // high. This matches the Material Design spec for
                          // ListTile widgets.
                          itemExtent: 48.0,
                          delegate: SliverChildBuilderDelegate(
                                (BuildContext context, int index) {
                              // This builder is called for each child.
                              // In this example, we just number each list item.
                              return Text('Text');
                            },
                            // The childCount of the SliverChildBuilderDelegate
                            // specifies how many children this inner list
                            // has. In this example, each tab has a list of
                            // exactly 30 items, but this is arbitrary.
                            childCount: 0,
                          ),
                        ),
                      ),
                    ],
                  );
                },
              ),
            );
          }).toList(),

        ),
      ),
  ),
);

Answer 1

TabBarView 定义了实际的选项卡，您可以将 TabBarView 代码替换为:

TabBarView(
  children: <Widget>[FirstTab(), SecondTab(), ThirdTab()],
)

并手动定义这些小部件，您可以在其中添加文本:

class FirstTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Text("Custom text here, 1st tab"),
    );
  }
}

class SecondTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Text("Custom text here, 2nd tab"),
    );
  }
}

class ThirdTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: Text("Custom text here, 3rd tab"),
    );
  }
}