美文网首页
Flutter-Widget

Flutter-Widget

作者: JerrySi | 来源:发表于2019-08-01 09:39 被阅读0次

Widget有无状态和有状态2种Widget。

无状态

StatelessWidgets:其实就是静态页面

Demo
class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Sample App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SampleAppPage(),
    );
  }
}

有状态

StatefulWidget:动态页面,需要配合State使用,State负责页面构建。

Demo
class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

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

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text
  String textToShow = "I Like Flutter";

  void _updateText() {
    setState(() {
      // update the text
      textToShow = "Flutter is Awesome!";
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Sample App"),
      ),
      body: new Center(child: new Text(textToShow)),
      floatingActionButton: new FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: new Icon(Icons.update),
      ),
    );
  }
}

相关文章

  • Flutter-Widget

    Widget有无状态和有状态2种Widget。 无状态 StatelessWidgets:其实就是静态页面 Dem...

  • flutter-Widget Element Rende

    flutter的理念是: 一切都是Widget(Everything is Widget)。我们在开发Flutte...

  • Flutter 生命周期和渲染原理

    Flutter-widget生命周期 生命周期基本概念 什么是生命周期 本质是回调方法(函数) 让开发者知道这个w...

网友评论

      本文标题:Flutter-Widget

      本文链接:https://www.haomeiwen.com/subject/vxttdctx.html