是否有任何方法来应用自定义主题的ExpansionTile。在我的情况下,我想有不同的背景颜色的标题和儿童的扩展瓷砖,但当以往任何时候的ExpansionTile是扩大,标题的背景颜色变化的儿童?
wmomyfyw1#
要将自定义Theme应用到任何小部件,只需使用Theme()小部件 Package 它。然后在小部件的数据字段中指定自定义主题。
Theme( data: ThemeData(/*specify your custom theme here*/), child: ExpansionTile() /*or any other widget you want to apply the theme to.*/ )
在您的例子中,要自定义ExpansionTile中的标题,
以类似的方式,您可以通过调整主题来自定义扩展瓷砖的几乎任何部分。更多详情check out this link .因为Flutter是建立在灵活性的考虑。你几乎可以做任何你想做的事。创建几乎任何你想要的UI。
vxqlmq5t2#
按照@user3315892的想法,你可以为ExpansionTile实现自己的有状态小部件,这样你就可以控制当标题展开或折叠时,标题和子标题的颜色。下面的示例仅在展开或折叠展开磁贴时更改标题的文本前景色和背景色,但您可以为子部件执行相同的操作。
class CustomExpansionTile extends StatefulWidget { @override State createState() => CustomExpansionTileState(); } class CustomExpansionTileState extends State<CustomExpansionTile> { bool isExpanded = false; @override Widget build(BuildContext context) { return ExpansionTile( title: Container( child: Text( "HEADER HERE", style: TextStyle( color: isExpanded ? Colors.pink : Colors.teal, ), ), // Change header (which is a Container widget in this case) background colour here. color: isExpanded ? Colors.orange : Colors.green, ), leading: Icon( Icons.face, size: 36.0, ), children: <Widget>[ Text("Child Widget One"), Text("Child Widget Two"), ], onExpansionChanged: (bool expanding) => setState(() => this.isExpanded = expanding), ); } }
iugsix8n3#
我找到了另一种方法。我不知道这是不是最好的方法,但对我来说更简单。要更改ExpansionTile的颜色,您可以使用Container将其 Package 起来并给予颜色。这将更改ExpansionTile的整个颜色,包括折叠和展开。但是如果你想给孩子们一个不同的颜色,你也可以用一个容器 Package 他们,并在那里设置另一种颜色。但是,请记住,您必须“扩展”该Container以占用所有可用空间(您可以通过正确设置宽度和高度参数来实现)。顺便说一句,这不会改变箭头的颜色。
Widget expansionTileTest(context) { return Container( color: Colors.grey, child: ExpansionTile( title: Text( "Title", style: TextStyle(color: Colors.black), ), children: <Widget>[ Container( height: MediaQuery.of(context).size.height * 0.1, width: MediaQuery.of(context).size.width, color: Colors.yellow, child: Center(child: Text("Hi")), ), ], ), ); }
CollapsedExpanded
ttvkxqim4#
您可以设置标题的颜色,然后在Container中设置body/children wrap并为该容器设置颜色。
mkshixfv5#
我用这段代码使尾随 Ionic 颜色为黑色。
Theme( data: Theme.of(context).copyWith(accentColor: Colors.black), child: ExpansionTile( backgroundColor: Colors.white, title: Text( 'Title Exmample', style: TextStyle(color: Colors.black), ), leading: CircleAvatar( backgroundColor: Colors.black.withOpacity(.07), child: Icon( Icons.apps_outlined, color: Theme.of(context).primaryColor, )), children: _buildTiles(Theme.of(context).primaryColor, Colors.black.withOpacity(.07), context), ), );
o3imoua46#
如果您希望ExpansionTile标题在关闭或展开时保持相同的颜色,可以设置其样式:
ExpansionTile( title: Text('HEADER HERE', style: TextStyle(color: Colors.red)), ... ),
ExpansionTile的其他样式是一个开放的功能请求:Feature request: More styling of ExpansionTile #15427
sg3maiej7#
您可以根据文档here和here使用collapsedBackgroundColor属性和backgroundColor属性。
collapsedBackgroundColor
backgroundColor
7条答案
按热度按时间wmomyfyw1#
要将自定义Theme应用到任何小部件,只需使用Theme()小部件 Package 它。然后在小部件的数据字段中指定自定义主题。
在您的例子中,要自定义ExpansionTile中的标题,
ExpansionTile关闭时
打开ExpansionTile时
以类似的方式,您可以通过调整主题来自定义扩展瓷砖的几乎任何部分。更多详情check out this link .
因为Flutter是建立在灵活性的考虑。你几乎可以做任何你想做的事。创建几乎任何你想要的UI。
vxqlmq5t2#
按照@user3315892的想法,你可以为ExpansionTile实现自己的有状态小部件,这样你就可以控制当标题展开或折叠时,标题和子标题的颜色。
下面的示例仅在展开或折叠展开磁贴时更改标题的文本前景色和背景色,但您可以为子部件执行相同的操作。
iugsix8n3#
我找到了另一种方法。我不知道这是不是最好的方法,但对我来说更简单。
要更改ExpansionTile的颜色,您可以使用Container将其 Package 起来并给予颜色。这将更改ExpansionTile的整个颜色,包括折叠和展开。
但是如果你想给孩子们一个不同的颜色,你也可以用一个容器 Package 他们,并在那里设置另一种颜色。但是,请记住,您必须“扩展”该Container以占用所有可用空间(您可以通过正确设置宽度和高度参数来实现)。
顺便说一句,这不会改变箭头的颜色。
Collapsed
Expanded
ttvkxqim4#
您可以设置标题的颜色,然后在Container中设置body/children wrap并为该容器设置颜色。
mkshixfv5#
我用这段代码使尾随 Ionic 颜色为黑色。
o3imoua46#
如果您希望ExpansionTile标题在关闭或展开时保持相同的颜色,可以设置其样式:
ExpansionTile的其他样式是一个开放的功能请求:Feature request: More styling of ExpansionTile #15427
sg3maiej7#
您可以根据文档here和here使用
collapsedBackgroundColor
属性和backgroundColor
属性。