import 'package:flutter/material.dart';

class ExpandableText extends StatefulWidget {
  final String text;
  final int maxLines;
  final TextStyle style;
  final TextAlign textAlign;

  ExpandableText({
    required this.text,
    this.maxLines = 1,
    this.style = const TextStyle(),
    this.textAlign = TextAlign.start,
  });

  @override
  _ExpandableTextState createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final TextPainter textPainter = TextPainter(
          text: TextSpan(text: widget.text, style: widget.style),
          maxLines: isExpanded ? null : widget.maxLines,
          textDirection: TextDirection.ltr,
          textScaleFactor: MediaQuery.of(context).textScaleFactor,
        );

        textPainter.layout(maxWidth: constraints.maxWidth);

        return Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Text(
              widget.text,
              maxLines:isExpanded ? 1000 : widget.maxLines,
              overflow: TextOverflow.ellipsis,
              textAlign: widget.textAlign,
              style: widget.style,

            ),
            if (!isExpanded && textPainter.didExceedMaxLines)
              GestureDetector(
                onTap: () {
                  setState(() {
                    isExpanded = true;
                  });
                },
                child: Text(
                  'show more',
                  textAlign: widget.textAlign,
                  style: TextStyle(
                    fontSize: widget.style.fontSize,
                    color: Colors.blue,
                    decoration: TextDecoration.underline,
                  ),
                ),
              ),
            if (isExpanded)
              GestureDetector(
                onTap: () {
                  setState(() {
                   isExpanded = false;
                  });
                },
                child: Text(
                  'show less',
                  textAlign: widget.textAlign,
                  style: TextStyle(
                    fontSize: widget.style.fontSize,
                    color: Colors.blue,
                    decoration: TextDecoration.underline,
                  ),
                ),
              ),
          ],
        );
      },
    );
  }
}

本文主要讲述Flutter开发过程中的实用技巧，让你少走弯路少掉坑，属于很干的干货总结。以实用为主，算是在深入原理过程中穿插的实用篇章。

1：Text 的 TextOverflow.ellipsis 不生效

列表是移动端经常使用的一种视图展示方式，在Flutter中提供了ListView和GridView。

为了可能展示出更好的效果，我这里提供了一段Json数据，所以我们可以先学习一下Json解析。

一. JSON读取和解析

在开发中，我们经常会使用本地JSON或者从服务器请求数据后回去到JSON，拿到JSON后通常会将JSON转成Model对象来进行后续的操作，因为这样操作更加的方便，也更加的安全。

import 'package:flutter/material.dart';

class FCShakeScreen extends StatefulWidget {
  static const routeName = '/shake';

  @override
  _FCShakeScreenState createState() => _FCShakeScreenState();
}

内容简介

在使用自带的ExpansionTile+ListView.builder时遇到一个坑：点击一个菜单时不能让其它菜单关闭。看网上的教程都没有解决，也不知道是不是自己写的有问题，就干脆把ExpansionTile修改了一下，用法ExpansionTile一致，记录一下以便下次使用：

首先 Flutter 是一个非常高性能的框架，因此大多时候不需要开发者做出特殊的处理，只需要避免常见的性能问题即可获得高性能的应用程序。