flutter - Flutter sticky_headers - 有没有办法组合相似的标题并在它下面有多个项目？

Question

我目前正在使用当前代码：

class Listing extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (kDebugMode) print ('Building Listing');
    return Scaffold(
      backgroundColor: Colors.blueGrey[900],
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              for (Booking booking in Provider.of<CP>(context).bookings.values)
                ListTileTheme(
                  // key: Key(booking.orderUID),
                  contentPadding: EdgeInsets.zero,
                  // minVerticalPadding: -1.0,
                  dense: true,
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
                      decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(0.5),
                            spreadRadius: 1,
                            blurRadius: 3,
                            offset: Offset(0, 3), // changes position of shadow
                          ),
                        ],
                      ),
                      child: StickyHeader(
                          header: Container(
                            height: 50.0,
                            color: Colors.black,
                            padding: EdgeInsets.symmetric(horizontal: 16.0),
                            alignment: Alignment.centerLeft,
                            child: Text(DateFormat('E d MMM').format(DateTime.fromMillisecondsSinceEpoch(booking.dateUnix)),
                              style: headerStyle,
                            ),
                          ),
                          content: BookingTileView(booking: booking))),
                )
            ],
          ),
        ),
      ),
    );
  }
}

目前，每个项目都有自己的标题。最好有一个类似项目的标题，但我不知道该怎么做？任何有关示例代码的帮助将不胜感激...谢谢

标签： flutterflutter-layoutflutter-dependencies

Answer 1

尝试使用flutter_sticky_header代替：

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

import '../common.dart';

class ListExample extends StatelessWidget {
  const ListExample({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppScaffold(
      title: 'List Example',
      slivers: [//<-----Group of Headers
        _StickyHeaderList(index: 0),
        _StickyHeaderList(index: 1),
        _StickyHeaderList(index: 2),
        _StickyHeaderList(index: 3),
      ],
    );
  }
}

class _StickyHeaderList extends StatelessWidget {
  const _StickyHeaderList({
    Key? key,
    this.index,
  }) : super(key: key);

  final int? index;

  @override
  Widget build(BuildContext context) {
    return SliverStickyHeader(//<-----Header
      header: Header(index: index),
      sliver: SliverList(//<-----Group items
        delegate: SliverChildBuilderDelegate(
          (context, i) => ListTile(
            leading: CircleAvatar(
              child: Text('$index'),
            ),
            title: Text('List tile #$i'),
          ),
          childCount: 6,
        ),
      ),
    );
  }
}