自定义样式或主题扩展平铺标题,Flutter

qrjkbowd  于 2023-06-07  发布在  Flutter
关注(0)|答案(7)|浏览(566)

是否有任何方法来应用自定义主题的ExpansionTile。在我的情况下,我想有不同的背景颜色的标题和儿童的扩展瓷砖,但当以往任何时候的ExpansionTile是扩大,标题的背景颜色变化的儿童?

wmomyfyw

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中的标题,

ExpansionTile关闭时

  • 标题文本的样式,即title依赖于ThemeData.textTheme.subhead(在flutter 2中是ThemeData.textTheme.subtitle1)
  • 而箭头图标的样式取决于ThemeData.unselectedWidget(在flutter2中是ThemeData.unselectedWidgetColor)

打开ExpansionTile时

  • 两个小部件的颜色都取决于ThemeData.accentColor

以类似的方式,您可以通过调整主题来自定义扩展瓷砖的几乎任何部分。更多详情check out this link .
因为Flutter是建立在灵活性的考虑。你几乎可以做任何你想做的事。创建几乎任何你想要的UI。

vxqlmq5t

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),
    );
  }
}
iugsix8n

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")),
          ),
        ],
      ),
    );
  }

Collapsed
Expanded

ttvkxqim

ttvkxqim4#

您可以设置标题的颜色,然后在Container中设置body/children wrap并为该容器设置颜色。

mkshixfv

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),
      ),
    );
o3imoua4

o3imoua46#

如果您希望ExpansionTile标题在关闭或展开时保持相同的颜色,可以设置其样式:

ExpansionTile(
  title: Text('HEADER HERE', style: TextStyle(color: Colors.red)),
  ...
),

ExpansionTile的其他样式是一个开放的功能请求:Feature request: More styling of ExpansionTile #15427

sg3maiej

sg3maiej7#

您可以根据文档herehere使用collapsedBackgroundColor属性和backgroundColor属性。

相关问题