关于 ExpansionTile title文字展开方向的疑难杂症

Question

想基于ExpansionTile 组件再来二次封装本节课的展开折叠组件，代码如：

  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      key: widget.key,
      tilePadding: const EdgeInsets.all(0),
      onExpansionChanged: (isExpanding) =>
          setState(() => _isCollapse = !isExpanding),
      initiallyExpanded: _isCollapse,
      /// demo
      title: Text('Test' * 40, style: videoTitleStyle, softWrap: true,
      maxLines: _isCollapse ? 1 : 3,),
      children: [
      ],
    );
  }

其中的_isCollapse是布尔值用于控制是否展开，videoTitleStyle只涉及颜色的更改和字体大小的修改，现在遇到的问题是：

1. 展开前
   

2. 展开后
   

点击展开后，此时因为折叠被解开所以文字溢出被取消：
但title文字的展开方向是从中间往两边展开，而不是预期的从上往下展开，而使用Align组件也没有解决这个问题…

阅读了ExpansionTile 底层的ListTile也没有搞清楚是什么原因导致的… 百思不得其解，希望得到解答，代码如上，可以尝试复现。

Answer 1

CrazyCodeBoy 2021-04-18 19:09:33

给Aligns设置alignment: Alignment.topCenter了吗？

AnimatedBuilder(
  animation: _controller.view,
  child: child,
  builder: (BuildContext context, Widget child) {
    return Align(
      heightFactor: _heightFactor.value,
      //fix 从布局之上的位置开始展开
      alignment: Alignment.topCenter,
      child: Container(
        //会撑满宽度后，让内容对其
        alignment: Alignment.topLeft,
        padding: EdgeInsets.only(top: 8),
        child: child,
      ),
    );
  },
)

• 提问者 it文科生 #1

  是设置了的，但是对 ExpansionTile 的 title 属性仍不起作用...其实这里的问题在于下title属性的Widget不会靠上对齐，我不理解这里的原理...

• 提问者 it文科生 #2

  就还是不清楚怎么样设置可以解决这个ExpansionTile的title文字的展开方向问题...

• CrazyCodeBoy 回复 提问者 it文科生 #3

  那就是在ExpansionTile场景下还不支持这样的操作。