19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局

一、Flutter AppBar 自定义顶部按钮图 标、颜色

左侧家图标按钮

leading: IconButton(
          icon: Icon(Icons.search),
          // 这个也可以有事件～
          onPressed: () {
            print("object");
          },

          // 右侧家图标
        ),

右侧家图标按钮IconButton

actions: [
          IconButton(
              icon: Icon(Icons.featured_play_list),
              onPressed: () {
                print("sss");
              })
        ],

除去上面的debug图标debugShowCheckedModeBanner: false,

centerTitle: true,

二、Flutter AppBar 中自定义 TabBar 实 现顶部 Tab 切换

DefaultTabController要放在MaterialApp外面 Scaffold里面

import 'package:flutter/material.dart';

class AppBardemoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
              title: Text('FlutterDemo'),
              bottom: TabBar(tabs: <Widget>[Tab(text: "热门"), Tab(text: "推荐")])),
          body: TabBarView(
            children: <Widget>[
              ListView(
                children: <Widget>[
                  ListTile(title: Text("这是第一个 tab")),
                  ListTile(title: Text("这是第一个 tab")),
                  ListTile(title: Text("这是第一个 tab"))
                ],
              ),
              ListView(
                children: <Widget>[
                  ListTile(title: Text("这是第二个 tab")),
                  ListTile(title: Text("这是第二个 tab")),
                  ListTile(title: Text("这是第二个 tab"))
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

当增加到了12个之后 寄可以进行滚动了

四、Flutter AppBar 中自定义 TabBar 实 现 Tabs 的另一种方法

import 'package:flutter/material.dart';

class AppBardemoPage extends StatefulWidget {
  AppBardemoPage({Key key}) : super(key: key);
  _AppBardemoPageState createState() => _AppBardemoPageState();
}

class _AppBardemoPageState extends State<AppBardemoPage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('顶部 tab 切换'),
        bottom: new TabBar(
          tabs: <Widget>[
            new Tab(
              icon: new Icon(Icons.directions_bike),
            ),
            new Tab(
              icon: new Icon(Icons.directions_boat),
            ),
            new Tab(
              icon: new Icon(Icons.directions_bus),
            ),
          ],
          controller: _tabController,
        ),
      ),
      body: new TabBarView(
        controller: _tabController,
        children: <Widget>[
          new Center(child: new Text('自行车')),
          new Center(child: new Text('船')),
          new Center(child: new Text('巴士')),
        ],
      ),
    );
  }
}

标签：tab,自定义,title,顶部,Text,AppBar,Tab,new
来源： https://blog.csdn.net/CeciliaXinn/article/details/115558706