增加按钮按下时的文字大小

Question

我是 flutter 的新手，我正在尝试一个简单的函数..
我有一个带有文本和凸起按钮的页面我想在每次按下按钮时将文本大小增加 1.0.. 我已经尝试过了，但它不起作用..

class _StoryDetailsState extends State<StoryDetails> {
@override
Widget build(BuildContext context) {
var textSize = 10.0;

return Scaffold(
  backgroundColor: Color(0xffEA3A82),
  appBar: AppBar(
    elevation: 0.0,
    backgroundColor: Color(0xffEA3A82),
    title: Text(widget.story_title),
  )
  ,body: SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Align(
          alignment: Alignment.topLeft
          ,child: Image.network(widget.story_detail_pic , width: double.infinity,)
      ),

      RaisedButton(
        child: Text('enlarge text'),
        onPressed: (){
          setState(() {
            textSize = textSize + 1.0;
            print(textSize); 
          });
        },
      ),
      Padding(
        padding: const EdgeInsets.all(10.0),
        child: ClipRRect(borderRadius: BorderRadius.circular(10)
            ,child: Container(color: Colors.white.withOpacity(0.6) ,child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(widget.story , style: TextStyle(fontSize: textSize),),
            ))),
      )
    ],
  ),
),
);
 } 
}

Answer 1

问题是您在构建方法内部声明了 textsize。每次调用 set state 时都会调用 build 方法，并且您的 textsize 会再次设置为 10。只需将 var textSize = 10.0; 移到构建方法之外，它就可以正常工作。

class _StoryDetailsState extends State<StoryDetails> {
  var textSize = 10.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffEA3A82),
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Color(0xffEA3A82),
        title: Text("Title"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Align(
                alignment: Alignment.topLeft,
                child: Image.network(
                  "http://via.placeholder.com/640x360",
                  width: double.infinity,
                )),
            RaisedButton(
              child: Text('enlarge text'),
              onPressed: () {
                textSize = textSize + 1.0;
                print(textSize);
                setState(() {});
              },
            ),
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Container(
                      color: Colors.white.withOpacity(0.6),
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "story",
                          style: TextStyle(fontSize: textSize),
                        ),
                      ))),
            )
          ],
        ),
      ),
    );
  }
}

增加按钮按下时的文字大小

increase textsize on button press flutter

flutter

textstyle