美文网首页
flutter TabBarView & TabBar 自定义

flutter TabBarView & TabBar 自定义

作者: 笨的很想飞 | 来源:发表于2021-10-19 00:14 被阅读0次

1.示例

Simulator Screen Shot - iPhone 12 Pro Max - 2021-10-19 at 00.15.06.png

2.代码

import 'package:flutter/material.dart';
class TabViewAndTabs extends StatelessWidget {

  late List<String> tabTitles;
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(length: 3,
      child: Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: Text('TabViewAndTabs'),
          bottom:PreferredSize(
              preferredSize: Size.fromHeight(50),
              child: Material(
                color: Colors.white,
                child: TabBar( 
                  indicatorColor: Colors.red,
                  indicatorPadding: EdgeInsets.fromLTRB(30, 0, 30, 0), 
                  // indicatorSize:Size(40, 2),
                  labelPadding: EdgeInsets.all(15.0),
                  labelStyle: TextStyle(fontSize: 16.0),
                  unselectedLabelColor: Colors.black54,
                  labelColor: Colors.blue,
                  tabs: <Widget>[
                    Text('tab1'),
                    Text('tab2'),
                    Text('tab3'),
                  ],
                ),
              )
          ),
        ),
        body:TabBarView(
          children: [
            Icon(Icons.home,size: 128.0,color: Colors.black12,),
            Icon(Icons.circle_notifications,size: 128.0,color: Colors.black12,),
            Icon(Icons.admin_panel_settings,size: 128.0,color: Colors.black12,)
          ],
        ),
      ),
    );

  }
}

相关文章

网友评论

      本文标题:flutter TabBarView & TabBar 自定义

      本文链接:https://www.haomeiwen.com/subject/jrmooltx.html