Flutter开发:AppBar+AppBarView实现android原生TabLayout+viewPager效果

Flutter开发:AppBar+AppBarView实现android原生TabLayout+viewPager效果_第1张图片


class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State
    with SingleTickerProviderStateMixin {
  int _counter = 0;
  final List itemBeans = [];
  List tabs = ["新闻", "历史", "图片"];
  TabController _tabController; //需要定义一个Controller

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
        bottom: TabBar(
            controller: _tabController,
            tabs: tabs.map((e) {
              return Tab(
                text: e,
              );
            }).toList()),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [PageOne(), PageTwo(), ThreePage()],
      ),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.yellow,
        child: Text('第一页'),
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(

        color: Colors.red,
        child: Text('第二页'),
      ),
    );
  }
}

class ThreePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(

        color: Colors.blue,
        child: Text('第三页'),
      ),
    );
  }
}

 

你可能感兴趣的:(Flutter开发)