Flutter小白實操之Widgets介紹

以下內容參考《Flutter中文開發(fā)者社區(qū)》和《Flutter實戰(zhàn)·第二版》，僅為個人學習、熟悉Flutter，不同版本可能有稍微不一樣。

環(huán)境

///
/// 例子來源：
/// Widgets 介紹：https://flutter.cn/docs/development/ui/widgets-intro
/// 《Flutter實戰(zhàn)·第二版》：https://book.flutterchina.club/chapter2/flutter_widget_intro.html
///
/// 環(huán)境：
/// Flutter 3.10.1 ? channel stable ? https://github.com/flutter/flutter.git
/// Framework ? revision d3d8effc68 (7 days ago) ? 2023-05-16 17:59:05 -0700
/// Engine ? revision b4fb11214d
/// Tools ? Dart 3.0.1 ? DevTools 2.23.1
///

概念

  • Flutter中萬物皆為Widget
  • Widget類本身是一個抽象類，其中最核心的就是定義了createElement()接口
  • 繼承StatelessWidget或StatefulWidget來間接繼承widget類來實現

StatelessWidget

用于不需要維護狀態(tài)的場景，它通常在build方法中通過嵌套其他widget來構建UI，在構建過程中會遞歸的構建其嵌套的widget。
如果widget需要接收子widget，那么child: T()或children : <T>[]參數通常應被放在參數列表的最后。

StatefulWidget

StatefulWidget類中添加了一個新的接口createState()。
createState()用于創(chuàng)建和StatefulWidget相關的狀態(tài)，它在StatefulWidget的生命周期中可能會被多次調用。

State

一個 StatefulWidget 類會對應一個 State 類，State 中的保存的狀態(tài)信息可以：

  • 在 widget 構建時可以被同步讀取。
  • 在 widget 生命周期中可以被改變，當State被改變時，可以手動調用其setState()方法通知Flutter 框架狀態(tài)發(fā)生改變，Flutter 框架在收到消息后，會重新調用其build方法重新構建 widget 樹，從而達到更新UI的目的。

State 中有兩個常用屬性：

  1. widget，它表示與該 State 實例關聯的widget實例，由Flutter 框架動態(tài)設置。比如：默認計算器中_MyHomePageState設置標題，獲取的就是MyHomePage的title屬性。
appBar: AppBar(
    title: Text(widget.title),
)
  1. context。StatefulWidget對應的 BuildContext。

State生命周期

  • initState：當 widget 第一次插入到 widget 樹時會被調用，對于每一個State對象，Flutter 框架只會調用一次該回調，所以，通常在該回調中做一些一次性的操作，如狀態(tài)初始化、訂閱子樹的事件通知等。不能在該回調中調用BuildContext.dependOnInheritedWidgetOfExactType（該方法用于在 widget 樹上獲取離當前 widget 最近的一個父級InheritedWidget，原因是在初始化完成后， widget 樹中的InheritFrom widget也可能會發(fā)生變化，所以正確的做法應該在在build()方法或didChangeDependencies()中調用它。

  • didChangeDependencies()：當State對象的依賴發(fā)生變化時會被調用；需要注意，組件第一次被創(chuàng)建后掛載的時候（包括重創(chuàng)建）對應的didChangeDependencies也會被調用。

  • build()：用于構建 widget 子樹的，會在如下場景被調用：

    1. 在調用initState()之后。
    2. 在調用didUpdateWidget()之后。
    3. 在調用setState()之后。
    4. 在調用didChangeDependencies()之后。
    5. 在State對象從樹中一個位置移除后（會調用deactivate）又重新插入到樹的其他位置之后。

  • reassemble()：此回調是專門為了開發(fā)調試而提供的，在熱重載(hot reload)時會被調用，此回調在Release模式下永遠不會被調用。

  • didUpdateWidget ()：在 widget 重新構建時，Flutter 框架會調用widget.canUpdate來檢測 widget 樹中同一位置的新舊節(jié)點，然后決定是否需要更新，如果widget.canUpdate返回true則會調用此回調。正如之前所述，widget.canUpdate會在新舊 widget 的key和runtimeType同時相等時會返回true，也就是說在在新舊 widget 的key和runtimeType同時相等時didUpdateWidget()就會被調用。

  • deactivate()：當 State 對象從樹中被移除時，會調用此回調。在一些場景下，Flutter 框架會將 State 對象重新插到樹中，如包含此 State 對象的子樹在樹的一個位置移動到另一個位置時（可以通過GlobalKey 來實現）。如果移除后沒有重新插入到樹中則緊接著會調用dispose()方法。

  • dispose()：當 State 對象從樹中被永久移除時調用；通常在此回調中釋放資源。

State生命周期

代碼

void main() {
  runApp(const MaterialApp(
    title: "Shopping App",
    home: ShoppingList(
        products: [
          Product(name: "Eggs"),
          Product(name: "Flour"),
          Product(name: "Chocolate chips"),
        ]),
  ));
  
  //runApp(const MaterialApp(home: Scaffold(body: Center(child: Counter2()))));
  //runApp(const MaterialApp(home: Scaffold(body: Center(child: Counter()))));
  //runApp(const MaterialApp(home: Scaffold(body: Center(child: MyButton()))));
  //runApp(const MaterialApp(title: "Flutter Tutorial", home: TutorialHome(),));
  //runApp(const MaterialApp(title: "My App", home: SafeArea(child: MyScaffold())));
  //runApp(const Center(child: Text("Hello, world!", textDirection: TextDirection.ltr)));
  //runApp(const MyApp());
}


class Product {
  const Product({required this.name});
  final String name;
}

typedef CartChangedCallback = Function(Product product, bool inCart);

class ShoppingListItem extends StatelessWidget {
  ShoppingListItem({
    required this.product,
    required this.inCart,
    required this.onCartChanged,
  }) : super (key: ObjectKey(product));
  
  final Product product;
  final bool inCart;
  final CartChangedCallback onCartChanged;

  Color _getColor(BuildContext context) {
    return inCart ? Colors.black54 : Theme.of(context).primaryColor;
  }

  TextStyle? _getTextStyle(BuildContext context) {
    if (!inCart) return null;

    return const TextStyle(color: Colors.black54, decoration: TextDecoration.lineThrough);
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: () {
        onCartChanged(product, inCart);
      },
      leading: CircleAvatar(
        backgroundColor: _getColor(context),
        child: Text(product.name[0]),
      ),
      title: Text(product.name, style: _getTextStyle(context)),
    );
  }
}

class ShoppingList extends StatefulWidget {
  const ShoppingList({required this.products, super.key});

  final List<Product> products;

  @override
  State<ShoppingList> createState() => _ShoppingListState();
}

class _ShoppingListState extends State<ShoppingList> {
  final _shoppingCart = <Product> {};

  void _handleCartChanged(Product product, bool inCart) {
    setState(() {
      if (!inCart) {
        _shoppingCart.add(product);
      } else {
        _shoppingCart.remove(product);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Shopping List"),
      ),
      body: ListView(
        padding: const EdgeInsets.symmetric(vertical: 8),
        children: widget.products.map((product) {
          return ShoppingListItem(product: product,
              inCart: _shoppingCart.contains(product),
              onCartChanged: _handleCartChanged);
        }).toList(),
      ),
    );
  }
}

////////////////////////////////////
////////////////////////////////////
////////////////////////////////////

//展示用StatelessWidget
class CounterDisplay extends StatelessWidget {
  const CounterDisplay({required this.count, super.key});

  final int count;

  @override
  Widget build(BuildContext context) {
    return Text("Count: $count");
  }
}

class CounterIncrementor extends StatelessWidget {
  const CounterIncrementor({required this.onPressed, super.key});

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: onPressed,
        child: const Text("Add2"));
  }
}

class Counter2 extends StatefulWidget {
  const Counter2({super.key});

  @override
  State<Counter2> createState() => _CounterState2();
}

class _CounterState2 extends State<Counter2> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        CounterIncrementor(onPressed: _increment),
        const SizedBox(width: 20),
        CounterDisplay(count: _counter),
      ],
    );
  }
}

////////////////////////////////////
////////////////////////////////////
////////////////////////////////////
class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(onPressed: _increment, child: const Text("Add")),
        const SizedBox(width: 20),
        Text("counter $_counter"),
      ],
    );
  }

}

////////////////////////////////////
////////////////////////////////////
////////////////////////////////////
class MyButton extends StatelessWidget {
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector( //手勢
      onTap: (){
        print("MyButton was tapped！");
      },
      child: Container( //矩形
        height: 50,
        padding: const EdgeInsets.all(8),
        margin: const EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.green[500],
        ),
        child: const Center(child: Text(
          "點我鴨",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),),
      ),
    );
  }
}


////////////////////////////////////
////////////////////////////////////
////////////////////////////////////
class TutorialHome extends StatelessWidget {
  const TutorialHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.menu),
          tooltip: "Navigation title",
          onPressed: null,
        ),
        title: const Text("Bar Title"),
        actions: const [
          IconButton(onPressed: null, icon: Icon(Icons.search), tooltip: "Search",),
        ],
        shadowColor: Colors.red,
      ),
      body: const Center(child: Text("Hello world!"),),
      floatingActionButton: const FloatingActionButton(
        onPressed: null,
        tooltip: "Add",
        child: Icon(Icons.add),
      ),
    );
  }
}


////////////////////////////////////
////////////////////////////////////
////////////////////////////////////
class MyAppBar extends StatelessWidget {
  const MyAppBar({required this.title, super.key});

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return Container( //高 56 獨立像素，左右內邊距 8 像素的 Container
      height: 56.0, //in logical pixels
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue[500]), //Row is a horizontal, linear layout.
      child: Row( //以 Row 布局來組織它的子元素
        children: [
          const IconButton(
              onPressed: null,
              icon: Icon(Icons.menu),
              tooltip: "Navigation menu",
          ),
          Expanded(child: title), //title widget，擴展以填充其它子 widget 未使用的可用空間
          const IconButton(onPressed: null,
              icon: Icon(Icons.search),
              tooltip: "Search",
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  const MyScaffold({super.key});

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column( //子 widget 組織在垂直列中
        children: [
          MyAppBar(
            title: Center(
                child: Text(
                    "Example title",
                    style: Theme.of(context).primaryTextTheme.titleLarge),
            ),
          ),
          const Expanded(
              child: Center(
                  child: Text("Hello, world")),
          ),
        ],
      ),
    );
  }
}
ShoppingList
Counter2
TutorialHome
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容