提问人:Joel Broström 提问时间:1/11/2023 更新时间:1/11/2023 访问量:138
Flutter Expandable 折叠后会留下空白区域
Flutter Expandable leaves empty area after being collapsed
问:
我有一个很长的文本,我已经包装在一个可扩展的小部件中。
当文本折叠时,我显示前 7 行,当它展开时,我显示整个文本,可能很长。
在我展开文本然后再次折叠它之后,我在折叠视图下得到了一个很长的无物区域。CustomScrollView
如您所见,“要素文本”小组件不再位于文本小组件的正下方。
这是小部件:
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(),
),
),
],
);
}
}
答: 暂无答案
评论