Flutter

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

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

官方提供了多個基本的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  

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);
  }
}

範例程式碼下載
https://bitbucket.org/steven0529/flutterdemo/src/master/

張阿鬼