flutter學習（六）DefaultTabController設計頂部滑動欄目

DefaultTabController可以設計類似於今日頭條頂部的滑動欄。

效果

注意，這裏的閃屏是因爲夜神模擬器的bug

注：閃屏是因爲夜神模擬器的bug

代碼解析

頂部的標題

return DefaultTabController(
  length: 2,
  child:Scaffold(
    appBar: AppBar(
      title:Row(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            child: TabBar(
              tabs: <Widget>[
                Tab(text: "左邊"),
                Tab(text: "右邊")
              ],
            ),
          )
        ],
      )
    ),
  )
);

可以看到，這個模塊是放在可以找到AppBar，並使用Expanded擴展出自己想要的效果

下方的內容，這裏使用TabBarView對應內容，一個ListView對應一個界面，如第一個ListView這樣寫

 body:TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title:Text("內容一")
                ),
                ListTile(
                  title: Text("內容一"),
                )
              ],
            ),
     

有幾個滑動的標題，就寫幾個ListView即可

源代碼

以下是全部代碼

import 'package:flutter/material.dart';
import 'package:flutter_app/res/listData.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("左右切換"),
          ),
          body: LayoutDemo()),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child:Scaffold(
        appBar: AppBar(
          title:Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Expanded(
                child: TabBar(
                  tabs: <Widget>[
                    Tab(text: "左邊"),
                    Tab(text: "右邊")
                  ],
                ),
              )
            ],
          )
        ),
        body:TabBarView(
          children: <Widget>[
            ListView(
              children: <Widget>[
                ListTile(
                  title:Text("內容一")
                ),
                ListTile(
                  title: Text("內容一"),
                )
              ],
            ),
            ListView(
              children: <Widget>[
                ListTile(
                    title:Text("內容二")
                ),
                ListTile(
                  title: Text("內容二"),
                )
              ],
            )
          ],
        )
      )
    );

  }
}