ExpansionTile继承自ListTile,它具有固定的高度。没有图块高度的输入参数。
我尝试将 ExpansionTile 包装在具有硬编码高度的 Container 小部件中,但这会导致子小部件仅占用硬编码高度内的空间。目前,由于title
小部件中的内容很大,因此出现“列溢出 23 像素”消息。有什么方法可以改变扩展瓷砖的高度吗?或者我可以使用另一个具有扩展/手风琴功能的小部件吗?
ExpansionTile
并制作你自己的版本。使用
ListTile
或
Container
调整
SizedBox
的大小很容易,但是
ExpansionTile
是一个材质小部件,它看起来不像是根据您的用例构建的。
ListTile
可以由主题“控制”。
/// Whether this list tile is part of a vertically dense list.
///
/// If this property is null then its value is based on [ListTileTheme.dense].
///
/// Dense list tiles default to a smaller height.
///
/// It is not recommended to set [dense] to true when [ThemeData.useMaterial3] is true.
final bool? dense;
在图书馆深处你可以找到这段代码:
double get _defaultTileHeight {
final bool hasSubtitle = subtitle != null;
final bool isTwoLine = !isThreeLine && hasSubtitle;
final bool isOneLine = !isThreeLine && !hasSubtitle;
final Offset baseDensity = visualDensity.baseSizeAdjustment;
if (isOneLine) {
return (isDense ? 48.0 : 56.0) + baseDensity.dy;
}
if (isTwoLine) {
return (isDense ? 64.0 : 72.0) + baseDensity.dy;
}
return (isDense ? 76.0 : 88.0) + baseDensity.dy;
}
所以只需将 ExpansionTile
包裹在
Theme
中并设置
dense: true
Theme(
data: Theme.of(context).copyWith(
listTileTheme: ListTileTheme.of(context).copyWith(
dense: true,
),
),
child: ExpansionTile(...),
),
虽然不是完全控制,但48
的高度正是我正在寻找的值。
import 'package:flutter/material.dart';
import 'package:configurable_expansion_tile/configurable_expansion_tile.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Configurable Expansion Tile Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Configurable Expansion Tile Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ConfigurableExpansionTile(
borderColorStart: Colors.blue,
borderColorEnd: Colors.orange,
animatedWidgetFollowingHeader: const Icon(
Icons.expand_more,
color: const Color(0xFF707070),
),
headerExpanded:
Flexible(child: Center(child: Text("A Header Changed"))),
header: Container(
color: Colors.transparent,
child: Center(child: Text("A Header"))),
headerBackgroundColorStart: Colors.grey,
expandedBackgroundColor: Colors.amber,
headerBackgroundColorEnd: Colors.teal,
children: [
Row(
children: <Widget>[Text("CHILD 1")],
),
Row(
children: <Widget>[Text("CHILD 2")],
)
],
)
],
),
),
);
}
}
它应该会给你带来你想要的结果。
希望对您有帮助,
谢谢
ExpansionTile(
title: Text("some Text"),
tilePadding: EdgeInsets.all(30),
),
Theme(
data: Theme.of(context).copyWith(
listTileTheme: ListTileTheme.of(context)
.copyWith(dense: true, minVerticalPadding: 16),
),
child: ExpansionTile(
Container(
margin: EdgeInsets.only(right: .5.sw),
decoration: BoxDecoration(
color: AppColor.profileBoarderColor,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: AppColor.profileBoarderColor)
),
child: ExpansionTile(
title: AppTextView(text: 'Seeson 01',),
children: List.generate(10, (index) {
return SizedBox(
width: 200,
child: ListTile(title: AppTextView(text: 'Seeson 01',),));
}
),
)
这是一种解决方法:您可以使用 ExpansionTile 小部件的 title 来呈现整个内容,而不是使用前导或尾随。您可以向标题小部件添加填充以增加 ExpansionTile 的高度。