我可以使用TabBar和TabBarView作为页面小部件吗？

Question

在我探索颤振框架的过程中，我遇到了一个问题，我不知道如何解决。我可以将TabBar与TabBarView结合使用作为其他小部件的子项吗？

Answer 1

原来它有效。这是相关的代码段：

new Container(
  decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
  child: new TabBar(
    controller: _controller,
    tabs: [
      new Tab(
        icon: const Icon(Icons.home),
        text: 'Address',
      ),
      new Tab(
        icon: const Icon(Icons.my_location),
        text: 'Location',
      ),
    ],
  ),
),
new Container(
  height: 80.0,
  child: new TabBarView(
    controller: _controller,
    children: <Widget>[
      new Card(
        child: new ListTile(
          leading: const Icon(Icons.home),
          title: new TextField(
            decoration: const InputDecoration(hintText: 'Search for address...'),
          ),
        ),
      ),
      new Card(
        child: new ListTile(
          leading: const Icon(Icons.location_on),
          title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),
          trailing: new IconButton(icon: const Icon(Icons.my_location), onPressed: () {}),
        ),
      ),
    ],
  ),
),

这是一个有效的例子：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _controller;

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('TestProject'),
      ),
      body: new ListView(
        children: <Widget>[
          new Card(
            child: new ListTile(
              title: const Text('Some information'),
            ),
          ),
          new Container(
            decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
            child: new TabBar(
              controller: _controller,
              tabs: [
                new Tab(
                  icon: const Icon(Icons.home),
                  text: 'Address',
                ),
                new Tab(
                  icon: const Icon(Icons.my_location),
                  text: 'Location',
                ),
              ],
            ),
          ),
          new Container(
            height: 80.0,
            child: new TabBarView(
              controller: _controller,
              children: <Widget>[
                new Card(
                  child: new ListTile(
                    leading: const Icon(Icons.home),
                    title: new TextField(
                      decoration: const InputDecoration(hintText: 'Search for address...'),
                    ),
                  ),
                ),
                new Card(
                  child: new ListTile(
                    leading: const Icon(Icons.location_on),
                    title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),
                    trailing: new IconButton(icon: const Icon(Icons.my_location), onPressed: () {}),
                  ),
                ),
              ],
            ),
          ),
          new Card(
            child: new ListTile(
              title: const Text('Some more information'),
            ),
          ),
          new RaisedButton(
            color: Theme.of(context).primaryColor,
            onPressed: () {},
            child: const Text(
              'Search for POIs',
              style: const TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

如果TabBarView中的高度可变，则可以使用Expanded。

body:
    ...
    new Expanded(
        child: new TabBarView(
          controller: _controller,
          children: <Widget>[
            new Card(
              child: new ListTile(
                leading: const Icon(Icons.home),
                title: new TextField(
                  decoration: const InputDecoration(hintText: 'Search for address...'),
                ),
              ),
            ),//Card
            .... 
            ....
          ],//Widget
        ),//TabBarView
      ),//Expanded

Answer 3

位于屏幕特定位置的 Tabbar。带有滚动标签的标签栏。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TabsPage(),
    );
  }
}

class TabModel {
  final String title;
  final Widget child;

  TabModel({
    @required this.title,
    @required this.child,
  })  : assert(title != null),
        assert(child != null);
}

class TabsPage extends StatefulWidget {
  @override
  _TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  final List<TabModel> _tabs = <TabModel>[
    TabModel(title: 'Название', child: Text('Название')),
    TabModel(title: 'Описание', child: Text('Описание')),
    TabModel(title: 'Видео', child: Text('Видео')),
    TabModel(title: 'Название', child: Text('Название')),
    TabModel(title: 'Описание', child: Text('Описание')),
    TabModel(title: 'Видео', child: Text('Видео')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 300,
          ),
          Expanded(
            child: DefaultTabController(
              length: _tabs.length,
              child: Scaffold(
                appBar: AppBar(
                  toolbarHeight: 28,
                  backgroundColor: Colors.amber,
                  flexibleSpace: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      TabBar(
                        isScrollable: true,
                        tabs: [
                          ..._tabs.map(
                            (tab) {
                              return Tab(
                                text: tab.title,
                              );
                            },
                          ).toList()
                        ],
                      ),
                    ],
                  ),
                ),
                body: TabBarView(
                  children: <Widget>[
                    ..._tabs.map(
                      (tab) {
                        return tab.child;
                      },
                    )
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}