Flutter可扩展折叠面板插件expansion_tile_widget的使用

CustomExpansionTileWidget 是一个经过编辑的折叠面板组件，允许你自定义头部和展开后的列表。

示例

CustomExpansionTileWidget(
  headerTitle: "概述", // 主标题
  headerDecoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(12)), // 圆角
    border: Border.all(color: Colors.blueAccent), // 边框颜色
    color: Colors.yellow, // 背景颜色
  ),
  children: [
    Container(
      height: 50,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black), // 边框颜色
        color: Colors.green, // 背景颜色
      ),
      child: const Center(
        child: Text("列表1"), // 文本内容
      ),
    ),
    Container(
      height: 50,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black), // 边框颜色
        color: Colors.red, // 背景颜色
      ),
      child: const Center(
        child: Text("列表2"), // 文本内容
      ),
    ),
    Container(
      height: 50,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black), // 边框颜色
        color: Colors.blueAccent, // 背景颜色
      ),
      child: const Center(
        child: Text("列表3"), // 文本内容
      ),
    ),
    Container(
      height: 50,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black), // 边框颜色
        color: Colors.orangeAccent, // 背景颜色
      ),
      child: const Center(
        child: Text("列表4"), // 文本内容
      ),
    ),
  ],
)

参数

完整示例代码

import 'package:expansion_tile_widget/expansion_tile_widget.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 50),
        child: CustomExpansionTileWidget(
          headerTitle: "概述",
          headerDecoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(12)),
            border: Border.all(color: Colors.blueAccent),
            color: Colors.yellow,
          ),
          children: [
            Container(
              height: 50,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color: Colors.green,
              ),
              child: const Center(
                child: Text("列表1"),
              ),
            ),
            Container(
              height: 50,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color: Colors.red,
              ),
              child: const Center(
                child: Text("列表2"),
              ),
            ),
            Container(
              height: 50,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color: Colors.blueAccent,
              ),
              child: const Center(
                child: Text("列表3"),
              ),
            ),
            Container(
              height: 50,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color: Colors.orangeAccent,
              ),
              child: const Center(
                child: Text("列表4"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}