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

已收录   阅读次数: 1,255
2021-07-1309:41:00 发表评论
摘要

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

分享至:
Flutter不用插件实现手风琴Accordions效果

开篇寄语

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

前情提要

内容详情

以下内容大多是更改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.'),
        ]));
  }
}

生成效果如下图所示:

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

  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: