Flutter之展开组件

fulutter展开组件的使用

flutter 提供的的 ExpansionTile

ExpansionTile(
                    maintainState: true,
                    tilePadding: EdgeInsets.only(
                      right: MediaQuery.of(context).size.width * 0.5 - 15,
                    ),
                    title: Text("测试"),
                    initiallyExpanded: false,
                    onExpansionChanged: (isOpen) {
                      setState(() {
                        this.showLine = !isOpen;
                      });
                    },
                    children: [
                     Text('数据1'),
                        Text('数据2'),
                           Text('数据3'),
                              Text('数据4'),
                                 Text('数据5'),
                    ],
                  ),

在项目中封装后的组件

/// radius -- card的角度
/// content card中间部分的内容
/// leftTitle 坐标的文字标题
/// showLine -- 标题下是否需要横线
/// titleHeight 标题的高度
/// rightTitle 右上标题
///  showTitle  是否需要标题
/// rightIcon  右边标题旁边的组件
/// rightOnTap 右标题的回调函数
/// isNeedExpand 添加是否展开功能
class CustomCard extends StatefulWidget {
  final double radius;
  final Widget content;
  final String leftTitle;
  final bool showLine;
  final double titleHeight;
  final String rightTitle;
  final bool showTitle;
  final Widget rightIcon;
  final Function onTap;
  final bool isNeedExpand;

  const CustomCard(
      {Key key,
      this.radius,
      this.content,
      this.leftTitle,
      this.showLine = true,
      this.titleHeight,
      this.rightTitle,
      this.showTitle,
      this.rightIcon,
      this.onTap,
      this.isNeedExpand = false})
      : super(key: key);
  @override
  State<StatefulWidget> createState() => _CustomCard(
      this.radius,
      this.content,
      this.leftTitle,
      this.showLine,
      this.titleHeight,
      this.rightTitle,
      this.showTitle,
      this.rightIcon,
      this.onTap,
      this.isNeedExpand);
}

class _CustomCard extends State<CustomCard> {
  final double radius;
  final Widget content;
  final String leftTitle;
  bool showLine;
  final double titleHeight;
  final String rightTitle;
  final bool showTitle;
  final Widget rightIcon;
  final Function onTap;
  bool isNeedExpand;
  _CustomCard(
      this.radius,
      this.content,
      this.leftTitle,
      this.showLine,
      this.titleHeight,
      this.rightTitle,
      this.showTitle,
      this.rightIcon,
      this.onTap,
      this.isNeedExpand);
  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(radius ?? 15)),
      child: Column(
        children: [
          showTitle
              ? Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      alignment: Alignment.center,
                      height: titleHeight ?? 40,
                      padding: EdgeInsets.only(
                        top: 15,
                        left: 15,
                      ),
                      child: InkWell(
                        child: Text(
                          leftTitle ?? '',
                          style: TextStyle(
                            fontSize: 15,
                          ),
                        ),
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(
                        right: 15,
                        top: 15,
                      ),
                      child: InkWell(
                        onTap: onTap,
                        child: Row(
                          children: [
                            Container(
                              margin: EdgeInsets.only(right: 2),
                              child: Text(
                                rightTitle ?? '',
                                style: TextStyle(color: CustomColor.loginForm),
                              ),
                            ),
                            rightIcon ?? SizedBox(),
                          ],
                        ),
                      ),
                    )
                  ],
                )
              : SizedBox(
                  height: 0,
                ),
          showLine == true
              ? Container(
                  padding: EdgeInsets.only(left: 15, right: 15, top: 10),
                  child: Line(),
                )
              : Text(''),
          isNeedExpand
              ? Container(
                  child: ExpansionTile(
                    maintainState: true,
                    tilePadding: EdgeInsets.only(
                      right: MediaQuery.of(context).size.width * 0.5 - 15,
                    ),
                    title: Text(""),
                    initiallyExpanded: false,
                    onExpansionChanged: (isOpen) {
                      setState(() {
                        this.showLine = !isOpen;
                      });
                    },
                    children: [
                      content,
                    ],
                  ),
                )
              : content,
        ],
      ),
    );
  }
}

总结

根据项目需要,展开的内容一般是放在Card中的,所以将展开组件封装在Card中,然后跟据属性配置就可以满足Card的内容是否需要展开