Flutter

Flutter 跨平台開發架構-基本Widget

張阿鬼 2020/12/30 18:45:19

1 2410

官方提供了多個基本的Widget可以使用，
使用Widget前先要有一些基本概念
本篇會簡單介紹幾個Widget。

Container class in Flutter - GeeksforGeeks
Margin:外部間隔距離
Padding:內部間隔距離

Image for post
alignment基本可以把一個區塊切成9格，分成水平垂直方向

Scaffold:
在預設建立的APP中，由MaterialApp的Home載入的widget就是Scaffold，
他建立了經常使用到的APP介面，主要分四個部分
AppBar:上方的巡覽列
Bottom:下方的功能巡覽列
Body:中間的內容
FloatingActionButton:右下方的浮動按鈕

Container
Container在Flutter是一個很常被使用到的容器，
其中以下幾個屬性常被使用到
child:子容器，可放置一個
color:背景顏色
alignment:對齊方式

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('MyFlutter'),
      ),
      body: MyContainer(),
    ));
  }
}

class MyContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

試著改變背景顏色，加入一個Text，並改變對齊方式

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("我是TEXT"),
      color: Colors.yellow,
      alignment: Alignment.centerLeft,
    );
  }

Column與Row
這兩個其實是功能相同的Widget，只有方向不同而已，
Row是水平擺放，而Column則是垂直方向。
比較需要了解的是它的對齊方式，

start：對齊起始點
end：對齊終點
center：置中對齊
spaceBetween：中間留空間
spaceAround：均分兩側空間
spaceEvenly：均分剩餘空間
stretch：佔滿縱向
baseline：對齊baseline

Image for post

以column為例

class MyColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [Text("Test1"), Text("Test2"), Text("Test3"), Text("Test4")],
      ),
      alignment: Alignment.centerLeft,
    );
  }
}

未給予對齊設定時預設畫面如圖

接著設定他的對齊方式

  return Container(
      child: Column(
        children: [Text("Test1"), Text("Test2"), Text("Test3"), Text("Test4")],
        mainAxisAlignment: MainAxisAlignment.center,
      ),
      alignment: Alignment.centerLeft,
    );

ListView
ListView是APP中很常用到的UI，其功能為展現多筆資料使用。
在這裡我們簡單使用ListView.builder來建立簡單的List資訊

class MyListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String> items = [];
    for (var i = 1; i <= 100; i++) items.add("Item$i");
    return Container(
      child: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text('${items[index]}'));
        },
      ),
      alignment: Alignment.centerLeft,
    );
  }
}

其執行結果

SnackBar
SnackBar通常用在於通知訊息使用，
他會在畫面下方長出訊息，並在一段時間後消失。

class MySnackBar extends StatelessWidget {
  SnackBar snackBar = SnackBar(content: Text("我就是SnackBar"));
  @override
  Widget build(BuildContext context) {
    return Container(
        child: OutlineButton(
            child: Text('點我'),
            onPressed: () {
              Scaffold.of(context).showSnackBar(snackBar);
            }),
        alignment: Alignment.center);
  }
}