flutter動態佈局StatefulWidget

StatefulWidget:有狀態的widget

數據更新後使用這個代碼更新頁面

setState(() { widget.posterList = posterList; });

如何使用:

繼承StatefulWidget類的創建

    普通的類需要重寫build方法,但是繼承StatefulWidget的類,重寫createState方法就可以了,而且這個類最好只有這                   一  個 方法(不包括構造方法、和成員變量),把邏輯放到狀態類裏。

    createState方法的返回值是狀態類

狀態類的創建:

    這裏面需要重寫build方法,就相當於把上面類的方法放到這個類裏面

    命名規則:

        前面加下劃線,後面加State,例如:_PosterShowState

    需要重寫的方法

        build:

            就相當於靜態類中的build方法,是一些組件和樣式

            如果報空指針之類的錯誤可以再這裏面return組件之前初始化一下數據

        initState:

            放數據加載的方法。

            加載數據的方法裏面需要用 setState((){}) 來更新頁面

            加載數據的方法最好能一次性把數據賦值完成,因爲他每變化一次就會刷新一次頁面,如果不能一次賦值,就寫一個可以一次賦值的方法

 

官方的例子

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;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章