Flutter Example 有状态组件

Flutter Example 有状态组件_第1张图片
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: MyButton(),
    );
  }
}

class MyButton extends StatefulWidget {
  @override
  State createState() => MyButtonState();
}

class MyButtonState extends State {
  int counter = 0;
  List strs = ['测试', '的', '描述', '文字'];
  String displayedString = "初始化文字...";
  //更改属性
  void onPressOfButton() {
    setState(() {
      displayedString = strs[counter];
      counter = counter < 3 ? counter + 1 : 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Center(child: new Text("Stateful Widget")),
        backgroundColor: Colors.green,
      ),
      body: new Container(
        child: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              new Text(displayedString, style: new TextStyle(fontSize: 40.0)),
              new Padding(padding: new EdgeInsets.all(10.0)),
              new RaisedButton(
                child: new Text(
                  "Press",
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
                onPressed: onPressOfButton,
              )
            ],
          ),
        ),
      ),
    );
  }
}

你可能感兴趣的:(Flutter Example 有状态组件)