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("内容二"),
                )
              ],
            )
          ],
        )
      )
    );

  }
}