美文网首页
Flutter Sliver TabBar List组合

Flutter Sliver TabBar List组合

作者: 三只仓鼠 | 来源:发表于2021-03-05 17:05 被阅读0次
    import 'dart:math';
    
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: CustomSliverAppbar(),
        );
      }
    }
    
    class CustomSliverAppbar extends StatefulWidget {
      @override
      _CustomSliverAppbarState createState() => _CustomSliverAppbarState();
    }
    
    class _CustomSliverAppbarState extends State<CustomSliverAppbar>
        with SingleTickerProviderStateMixin {
      TabController _tabController;
    
      @override
      void initState() {
        _tabController = TabController(
          initialIndex: 0,
          length: 2,
          vsync: this,
        );
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: NestedScrollView(
            floatHeaderSlivers: true,
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  title: Text(
                    "WhatsApp type sliver appbar",
                  ),
                  centerTitle: true,
                  pinned: true,
                  floating: true,
                  bottom: TabBar(
                      indicatorColor: Colors.black,
                      labelPadding: const EdgeInsets.only(
                        bottom: 16,
                      ),
                      controller: _tabController,
                      tabs: [
                        Text("TAB A"),
                        Text("TAB B"),
                      ]),
                ),
              ];
            },
            body: TabBarView(
              controller: _tabController,
              children: [
                TabA(),
                const Center(
                  child: Text('Display Tab 2',
                      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                ),
              ],
            ),
          ),
        );
      }
    
      @override
      void dispose() {
        _tabController.dispose();
        super.dispose();
      }
    }
    
    class TabA extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scrollbar(
          child: ListView.separated(
            separatorBuilder: (context, child) => Divider(
              height: 1,
            ),
            padding: EdgeInsets.all(0.0),
            itemCount: 30,
            itemBuilder: (context, i) {
              return Container(
                height: 100,
                width: double.infinity,
                color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
              );
            },
          ),
        );
      }
    }
    
    

    https://github.com/SinoMiles/xinchacha

    相关文章

      网友评论

          本文标题:Flutter Sliver TabBar List组合

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