flutter DefaultTabController

效果

實現代碼

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: '測試程序',
    theme: ThemeData(primaryColor: Colors.greenAccent),
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  List<String> _tabTitles = ['@我','評論','私信'];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: DefaultTabController(
        length: _tabTitles.length,
        child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            title: Text('消息中心',style: TextStyle(color: Color(0xffffffff)),),
            centerTitle: true,
            bottom: PreferredSize(
                child: Material(
                  color: Colors.blue,
                  child: TabBar(
                    indicatorColor: Colors.red,
                    labelColor: Colors.red,
                    unselectedLabelColor: Colors.yellow,
                    tabs: _tabTitles.map((title) => Tab(
                      text: title,
                    )).toList(),
                  ),
                ),
                preferredSize: Size.fromHeight(48)),
          ),
          body: TabBarView(
              children: [
                Center(
                  child: Text('@我'),
                ),
                Center(
                  child: Text('評論'),
                ),
                Center(
                  child: Text('私信'),
                ),
              ]
          ),
        ),
      ),
    );
  }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章