Flutter--UI

flutter --UI

前言

想象一下你在疊積木。
每一個你想要擺放的都是一個 “widget”
比如官網第一段代碼：

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, world!',
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

將一個 Center 放入整個app中。center裏面再放一個child Text，最後構造這個Text。

積木(Widget)分類

• StatefulWidgets
• StatefullessWidgets ：無狀態小部件
• 堆棧：
• 行列：這裏理解起來，row是一行排列，colnum是一列排列就ok了。
• Container（容器）：允許您創建矩形可視元素。可以使用BoxDecoration裝飾容器 ，例如背景，邊框或陰影。甲 容器還可以具有邊距，填充和施加到其大小限制。另外， 可以使用矩陣在三維空間中變換容器。
• Expanded：填充剩餘空間。其中的flex屬性表示？
• 最小單元：IconButton，Text
• framework 提供的：Navigator
• Material Components ：Scaffold
  詳見：https://flutter.io/docs/development/ui/widgets/material

操作

• 手勢GestureDetector ：onTap,onDoubleTap 等等
  詳見：https://flutter.io/docs/development/ui/advanced/gestures

pubspec.yaml

官方描述：請務必uses-material-design: true在文件flutter 部分中輸入一個條目pubspec.yaml。它允許您使用預定義的材料圖標集

name: my_app
flutter:
  uses-material-design: true

許多小部件需要在MaterialApp內部 才能正確顯示，以便繼承主題數據。

QA

1，這兩段代碼中，沉浸式差異是體現在哪個屬性上；

import 'package:flutter/material.dart';
class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  // Fields in a Widget subclass are always marked "final".

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return 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(
        // <Widget> is the type of items in the list.
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null disables the button
          ),
          // Expanded expands its child to fill the available space.
          Expanded(
            child: Center(
              child: title,
            ),
          ),
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece of paper on which the UI appears.
    return Material(
      // Column is a vertical, linear layout.
      child: Column(
        children: <Widget>[
          MyAppBar(
            title: Text(
              'Example title',
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),
          Expanded(
            child: Center(
              child: Text('Hello, world!'),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    title: 'Flutter Tutorial', // used by the OS task switcher
    //home: MyScaffold(),  //沉入了狀態欄
    home: TutorialHome(),//未沉入狀態欄
  ));
}


class TutorialHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Scaffold is a layout for the major Material Components.
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: Text('Example title'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
      // body is the majority of the screen.
      body: Center(
        child: Text('Hello, world!'),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Add', // used by assistive technologies
        child: Icon(Icons.add),
        onPressed: null,
      ),
    );
  }
}

2，佈局層級也是個問題啊，太深了