Flutter Expandable 折叠后会留下空白区域

Flutter Expandable leaves empty area after being collapsed

提问人:Joel Broström 提问时间:1/11/2023 更新时间:1/11/2023 访问量:138

问:

我有一个很长的文本,我已经包装在一个可扩展的小部件中。
当文本折叠时,我显示前 7 行,当它展开时,我显示整个文本,可能很长。
在我展开文本然后再次折叠它之后,我在折叠视图下得到了一个很长的无物区域。
CustomScrollView

以下是展开和折叠文本的屏幕截图:
enter image description here enter image description here

如您所见,“要素文本”小组件不再位于文本小组件的正下方。

这是小部件:

import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';
import 'package:My_ui/My_ui.dart';
import 'package:listing_detail_page/generated/l10n.dart';
import 'package:listing_detail_page/network/models/listing_detail.dart';

import '../../../generic_components/bottom_fade.dart';

class DescriptionView extends StatelessWidget {
  const DescriptionView({
    Key? key,
    required this.details,
    required this.expandableController,
  }) : super(key: key);

  final ListingDetails details;
  final ExpandableController expandableController;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        left: Spacing.x2,
        right: Spacing.x2,
        top: Spacing.x3,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text(
            S.of(context).descriptionView_title_description,
            style: Theme.of(context).textTheme.headlineMedium?.copyWith(
                  fontWeight: FontWeight.w600,
                  color: MyColors.grey25,
                ),
          ),
          const SizedBox(height: Spacing.x1),
          ExpandableNotifier(
            controller: expandableController,
            child: ScrollOnExpand(
              child: Expandable(
                collapsed: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    BottomFade(
                      height: 80,
                      child: Text(
                        details.description ?? '',
                        maxLines: 7,
                        overflow: TextOverflow.fade,
                        style: Theme.of(context)
                            .textTheme
                            .bodyLarge
                            ?.copyWith(height: 1.5),
                      ),
                    ),
                    const SizedBox(height: Spacing.x1),
                    ExpandableButton(
                      child: Row(
                        children: [
                          const Icon(
                            Icons.add,
                            color: MyColors.blue,
                            size: 22,
                          ),
                          const SizedBox(width: Spacing.x1),
                          Text(
                            S
                                .of(context)
                                .descriptionView_button_readTheFullDescription,
                            textAlign: TextAlign.start,
                            style:
                                Theme.of(context).textTheme.bodyLarge?.copyWith(
                                      color: MyColors.blue,
                                      height: 1.5,
                                    ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                expanded: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Text(
                      details.description ?? '',
                      style: Theme.of(context)
                          .textTheme
                          .bodyLarge
                          ?.copyWith(height: 1.5),
                    ),
                    const SizedBox(height: Spacing.x1),
                    ExpandableButton(
                      child: Row(
                        children: [
                          const Icon(
                            Icons.remove,
                            color: MyColors.blue,
                            size: 22,
                          ),
                          const SizedBox(width: Spacing.x1),
                          Text(
                            S.of(context).descriptionView_button_showLess,
                            textAlign: TextAlign.start,
                            style:
                                Theme.of(context).textTheme.bodyLarge?.copyWith(
                                      color: MyColors.blue,
                                      height: 1.5,
                                    ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

以下是它的使用方式:

import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';
import 'package:My_ui/My_ui.dart';
import 'package:listing_detail_page/network/models/feature_section.dart';
import 'package:listing_detail_page/network/models/listing_detail.dart';
import 'package:listing_detail_page/ui/generic_components/My_sliver_app_bar.dart';
import 'package:listing_detail_page/ui/screens/listing_detail/components/address_section.dart';
import 'package:listing_detail_page/ui/screens/listing_detail/components/description_view.dart';
import 'package:listing_detail_page/ui/screens/listing_detail/components/price_tile.dart';

class ListingDetailBody extends StatefulWidget {
  const ListingDetailBody({
    Key? key,
    required this.details,
    required this.listingId,
    required this.sections,
  }) : super(key: key);

  final ListingDetails details;
  final String listingId;
  final List<FeatureSection> sections;

  @override
  State<ListingDetailBody> createState() => _ListingDetailBodyState();
}

class _ListingDetailBodyState extends State<ListingDetailBody> {
  final ExpandableController _descriptionExpandableController =
      ExpandableController();

  @override
  void dispose() {
    _descriptionExpandableController.dispose();
    super.dispose();
  }

  Widget? _buildDescriptionView(BuildContext context) {
    final description = widget.details.description;
    if (description != null && description.isNotEmpty) {
      return DescriptionView(
        details: widget.details,
        expandableController: _descriptionExpandableController,
      );
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: const BouncingScrollPhysics(),
      slivers: [
        MySliverAppBar(
          details: widget.details,
          listingId: widget.listingId,
        ),
        SliverList(
          delegate: SliverChildListDelegate(
            [
              ...
              const SizedBox(height: Spacing.x3),
              AddressSection(details: widget.details),
              PriceTile(details: widget.details),
              _buildDescriptionView(context),
             ...
            ].whereType<Widget>().toList(),
          ),
        ),
      ],
    );
  }
}

Flutter 飞镖 可扩展

评论


答: 暂无答案