列表悬浮头

238 阅读1分钟

import 'package:sticky_headers/sticky_headers.dart';
...
ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return StickyHeader( // 有三种模式,包含动画的,和内容融合的,具体写法请看github实例
      header: Container(
        height: 50.0,
        color: Colors.blue[(index % 6 + 3) * 100],
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          'Header #$index',
          style: TextStyle(color: Colors.white),
        ),
      ),
      content: Container(
        width: double.infinity,
        height: 100,
        color: index % 2 == 0
            ? Colors.red[(index % 5 + 3) * 100]
            : Colors.yellow[(index % 5 + 3) * 100],
        child: Center(
          child: Text('$index'),
        ),
      ),
    );
  },
);