Flutter：更新其他有状态小部件中的字符串

Question

I'm using a statefull widget to handle the length of my text. (show more, show less)

class DescriptionTextWidget extends StatefulWidget {
  final String text;

  DescriptionTextWidget({@required this.text});

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

class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
  String firstHalf;
  String secondHalf;

  bool flag = true;

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

    if (widget.text.length > 400) {
      firstHalf = widget.text.substring(0, 400);
      secondHalf = widget.text.substring(400, 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, style: TextStyle(color: Colors.white))
          : new Column(
              children: <Widget>[
                new Text(
                  flag ? (firstHalf + "...") : (firstHalf + secondHalf),
                  style: TextStyle(color: Colors.white),
                ),
                new InkWell(
                  splashColor: Colors.transparent,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      new Text(
                        flag ? "show more" : "show less",
                        style:
                            new TextStyle(color: Colors.white.withOpacity(0.8)),
                      ),
                    ],
                  ),
                  onTap: () {
                    setState(() {
                      flag = !flag;
                    });
                  },
                ),
              ],
            ),
    );
  }
}

In my main class: I 'give' the text to that stfull widget like this:

 GestureDetector(
                    onTap: () async {

                    },
                    child: DescriptionTextWidget(
                        text: myString,
                  ),

If I update myString in my main statefull widget, the String doesn't get updated in the statefull widget 'DescriptionTextWidget'.

What's the best way to update the String in the class DescriptionTextWidget?

Thanks in advance!

Answer 1

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  List<String> myString = ["test"];

  void _replace() {
    setState(() {
      myString[0] = "tapped";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: DescriptionTextWidget(
          text: myString,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _replace,
        child: Icon(Icons.autorenew),
      ),
    );
  }
}

class DescriptionTextWidget extends StatefulWidget {
  final List<String> text;

  DescriptionTextWidget({@required this.text});

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

class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {

    String firstHalf;
    String secondHalf;

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

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

Answer 2

Sample on DartPad

class DescriptionTextWidget extends StatefulWidget {
  final ValueNotifier<String> text;
}

class _DescriptionTextWidgetState extends State<DescriptionTextWidget> {
  @override
  void initState() {
    super.initState();
    widget.text.addListener(() => setState(initText));
    initText();
  }

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

main class:

ValueNotifier<String> myString;

updateString(String value){
  myString.value = value;
}