Flutter不用插件实现手风琴Accordions效果

开篇寄语

之前伯衡君下载过不少学习英语，编程的应用，很多都是有这种效果，点击就展开，类似于手风琴，实现这个效果就可以做一些简单的应用啦，比如说字典啦，命令查询含义之类的，总之是一个很有用的效果，那么该如何实现呢？请参看本篇文章。

前情提要

• 《Flutter制作自己的第一个全平台APP学习之Widgets篇》
• 《Flutter制作自己的第一个全平台APP学习之Lists篇》
• 《Flutter制作自己的第一个全平台APP学习之Popup篇》
• 《如何移除Flutter右上方的调试Debug图标使用一命令轻松解决》
• 《Flutter如何设置移动端禁止随手机自动旋转屏幕》

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

在lib文件夹中新建一个文件，可以参考命名为Accordions.dart的文件，键入代码如下：

// ignore_for_file: use_key_in_widget_constructors

import 'package:flutter/material.dart';

class Accordion extends StatefulWidget {
  final String title;
  final String content;

  const Accordion(this.title, this.content);
  @override
  _AccordionState createState() => _AccordionState();
}

class _AccordionState extends State<Accordion> {
  bool _showContent = false;
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(2),
      child: Column(children: [
        ListTile(
          title: Text(widget.title),
          trailing: IconButton(
            icon: Icon(
                _showContent ? Icons.arrow_drop_up : Icons.arrow_drop_down),
            onPressed: () {
              setState(() {
                _showContent = !_showContent;
              });
            },
          ),
        ),
        _showContent
            ? Container(
                padding:
                    const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                child: Text(widget.content),
              )
            : Container()
      ]),
    );
  }
}

接着在main.dart文件，键入以下代码：

// ignore_for_file: prefer_const_constructors

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'Flutter Demo',
          ),
        ),
        body: Column(children: const <Widget>[
          Accordion('Section #1',
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ornare vulputate. Curabitur faucibus condimentum purus quis tristique.'),
          Accordion('Section #2',
              'Fusce ex mi, commodo ut bibendum sit amet, faucibus ac felis. Nullam vel accumsan turpis, quis pretium ipsum. Pellentesque tristique, diam at congue viverra, neque dolor suscipit justo, vitae elementum leo sem vel ipsum'),
          Accordion('Section #3',
              'Nulla facilisi. Donec a bibendum metus. Fusce tristique ex lacus, ac finibus quam semper eu. Ut maximus, enim eu ornare fringilla, metus neque luctus est, rutrum accumsan nibh ipsum in erat. Morbi tristique accumsan odio quis luctus.'),
        ]));
  }
}

生成效果如下图所示：