flutterfragment android appbar高度 flutter sliver tabbarview

转载

jiecho 2024-05-28 13:51:15

TabBar、TabBarView

TabBar属性

TabBar属性

const TabBar({
    Key key,
    @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个
    this.controller,
    this.isScrollable = false,//是否需要滚动，true为需要
    this.indicatorColor,//选中下划线的颜色
    this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,//用于设定选中状态下的展示样式
    this.indicatorSize,//选中下划线的长度，label时跟文字内容长度一样，tab时跟一个Tab的长度一样
    this.labelColor,//设置选中时的字体颜色，tabs里面的字体样式优先级最高
    this.labelStyle,//设置选中时的字体样式，tabs里面的字体样式优先级最高
    this.labelPadding,
    this.unselectedLabelColor,//设置未选中时的字体颜色，tabs里面的字体样式优先级最高
    this.unselectedLabelStyle,//设置未选中时的字体样式，tabs里面的字体样式优先级最高
    this.dragStartBehavior = DragStartBehavior.start,
    this.onTap,//点击事件
  })

实例

void main() => runApp(new MyApp());

//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appBar2 = new AppBar(
      title: new Text('首页'),
      bottom: new PreferredSize(
          child: new ShopTabBarWidget(),
          preferredSize: Size.fromHeight(kMinInteractiveDimension)),
    );
    return new MaterialApp(
      title: 'welcome',
      home: new Scaffold(
        appBar: appBar2,
        body: new Center(
          child: new IconButton(
            icon: new Icon(Icons.volume_up),
            tooltip: 'Increase volume by 10%',
            onPressed: () {
              // ...
            },
          ),
        ),
      ),
    );
  }
}

class ShopTabBarWidget extends StatefulWidget {
  @override
  ShopTabBarWidgetState createState() => ShopTabBarWidgetState();
}

class ShopTabBarWidgetState extends State<ShopTabBarWidget>
    with SingleTickerProviderStateMixin {
    //TabController 是必须需要实现的，不实现会创建失败
  TabController tabController;
	
  @override
  void initState() {
    tabController = TabController(length: 10, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TabBar(
      tabs: [
        Text('母婴'),
        Text('儿童'),
        Text('女装'),
        Text('百货'),
        Text('美食'),
        Text('美妆'),
        Text('母婴'),
        Text('儿童'),
        Text('女装'),
        Text('百货'),
      ],
      controller: tabController,
      onTap: (int index) {
        print('Selected......$index');
      },
      unselectedLabelColor: Colors.white, //设置未选中时的字体颜色，tabs里面的字体样式优先级最高
      unselectedLabelStyle:
          TextStyle(fontSize: 16), //设置未选中时的字体样式，tabs里面的字体样式优先级最高
      labelColor: Colors.red, //设置选中时的字体颜色，tabs里面的字体样式优先级最高
      labelStyle: TextStyle(fontSize: 16.0), //设置选中时的字体样式，tabs里面的字体样式优先级最高
      isScrollable: true, //允许左右滚动
      indicatorColor: Colors.red, //选中下划线的颜色
      indicatorSize:
          TabBarIndicatorSize.label, //选中下划线的长度，label时跟文字内容长度一样，tab时跟一个Tab的长度一样
      indicatorWeight: 4.0, //选中下划线的高度，值越大高度越高，默认为2。0
    );
  }
}

实现下图效果

flutterfragment android appbar高度 flutter sliver tabbarview_ide

void main() => runApp(new MyApp());

//StatelessWidget 无状态widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'welcome',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('首页'),
        ),
        body: new Center(child: ShopTabBarWidget()),
        bottomNavigationBar: new BottomNavigationWidget(),
      ),
    );
  }
}

class ShopTabBarWidget extends StatefulWidget {
  @override
  ShopTabBarWidgetState createState() => ShopTabBarWidgetState();
}

class ShopTabBarWidgetState extends State<ShopTabBarWidget>
    with SingleTickerProviderStateMixin {
  TabController tabController;
  var tabs = <Text>[];

  @override
  void initState() {
    super.initState();
    tabs = <Text>[
      Text('儿童'),
      Text('女装'),
      Text('百货'),
      Text('美食'),
      Text('美妆'),
    ];

    tabController = TabController(length: tabs.length, vsync: this);
    //.addListenter 可以对 TabController 增加监听，每次发生切换，都能够走到方法中
    this.tabController.addListener(() {
      print(this.tabController.toString());
      print(this.tabController.index);
      print(this.tabController.length);
      print(this.tabController.previousIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Column(
        children: <Widget>[
          ConstrainedBox(
            constraints: BoxConstraints(
              minWidth: double.infinity,
              minHeight: Size.fromHeight(kMinInteractiveDimension).height,
            ),
            child: Container(
              color: Colors.blue,
              child: TabBar(
                tabs: tabs,
                controller: tabController,
                onTap: (int index) {
                  print('Selected......$index');
                },
                unselectedLabelColor:
                    Colors.white, //设置未选中时的字体颜色，tabs里面的字体样式优先级最高
                unselectedLabelStyle:
                    TextStyle(fontSize: 16), //设置未选中时的字体样式，tabs里面的字体样式优先级最高
                labelColor: Colors.red, //设置选中时的字体颜色，tabs里面的字体样式优先级最高
                labelStyle:
                    TextStyle(fontSize: 16.0), //设置选中时的字体样式，tabs里面的字体样式优先级最高
                isScrollable:
                    false, //isScrollable 默认为false 里面标题平分显示 ；true 可以滚动不平分显示
                indicatorColor: Colors.red, //选中下划线的颜色
                indicatorSize: TabBarIndicatorSize
                    .label, //选中下划线的长度，label时跟文字内容长度一样，tab时跟一个Tab的长度一样
                indicatorWeight: 4.0, //选中下划线的高度，值越大高度越高，默认为2。0
              ),
            ),
          ),
          Expanded(
              child: new TabBarView(
            controller: tabController,
            children: <Widget>[
              ListViewContnet(),
              ListViewContnet(),
              ListViewContnet(),
              ListViewContnet(),
              ListViewContnet(),
            ],
          )),
        ],
      ),
    );
  }
}

const TITLE = '标题标题标题标题标题标题标题';

class ListViewContnet extends StatelessWidget {
  const ListViewContnet({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
        ListTile(title: Text(TITLE)),
      ],
    );
  }
}

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomNavigationWidgetState();
}

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  int _currentIndex = 0;

  List<BottomNavigationBarItem> _barItem = [
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
    BottomNavigationBarItem(icon: Icon(Icons.list), title: Text('新闻')),
    BottomNavigationBarItem(icon: Icon(Icons.people), title: Text('我的')),
    BottomNavigationBarItem(icon: Icon(Icons.phone), title: Text('隐私')),
  ];

  @override
  Widget build(BuildContext context) {
    return new BottomNavigationBar(
      items: _barItem,
      currentIndex: _currentIndex,
      onTap: (int index) {
        setState(() {
          _currentIndex = index;
        });
      },
      selectedItemColor: Colors.amber[800],
      unselectedItemColor: Colors.grey,
      selectedFontSize: 12.0,
      type: BottomNavigationBarType.fixed,
    );
  }
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。