如何在带有闪烁内容的文本中进行dropdawn容器

问题描述 投票:0回答:1

我是扑扑的新手。我不知道扑扑中的所有假发。如何用文本制作黎明容器?点击或按下按钮时,容器会堵塞。

enter image description here

enter image description here

flutter flutter-layout
1个回答
3
投票

这会很好,请检查一下。检查下面的代码:

class HomeScreen extends StatelessWidget {
  final String description =
      "Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text("Demo App"),
      ),
      body: new Container(
        child: new ExpandText(text: description),
      ),
    );
  }
}

class ExpandText extends StatefulWidget {
  final String text;

  ExpandText({@required this.text});

  @override
  _ExpandTextState createState() => new _ExpandTextState();
}

class _ExpandTextState extends State<ExpandText> {
  String firstHalf;
  String secondHalf;

  bool flag = true;

  @override
  void initState() {
    super.initState();

    if (widget.text.length > 50) {
      firstHalf = widget.text.substring(0, 50);
      secondHalf = widget.text.substring(50, widget.text.length);
    } else {
      firstHalf = widget.text;
      secondHalf = "";
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
      child: secondHalf.isEmpty
          ? new Text(firstHalf)
          : new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Text(flag ? (firstHalf + "...") : (firstHalf + secondHalf)),
          new InkWell(
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                new Text(
                  flag ? "show more" : "show less",
                  style: new TextStyle(color: Colors.blue),
                ),
              ],
            ),
            onTap: () {
              setState(() {
                flag = !flag;
              });
            },
          ),
        ],
      ),
    );
  }
}

输出:

Collapsed

Expanded

我希望这会有所帮助。

© www.soinside.com 2019 - 2024. All rights reserved.