我可以使用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), 
      ), 
     ), 
     ], 
    ), 
    ); 
    } 
}