Flutter 基本布局

本篇部落格大致介紹了通過flutter實現一些簡單的頁面布局，官方的參考文件： 

首先，專案的入口如下，後面的所有操作都是對container變數進行更改

import '

package:flutter/material.dart';
class
//@override
widget build(buildcontext context) 
}

1、使用flutter建立乙個 300x300 的塊，用綠色將其填充

var container =container(

width: 
300,
height: 
300,
decoration: boxdecoration(
color: colors.green,
),);

2、字型樣式的設定，以及內邊距、外邊距的設定，背景顏色的設定，在textstyle()中，通過letterspace設定每個字元之間的間隙、wordspace設定每個單詞之間的間隙。

var container =container(

child: text(
'hello world',
style: textstyle(
fontsize: 30,
color: colors.pink,
fontweight: fontweight.w900
),),
padding: edgeinsets.all(
20), //
padding 設定
margin: edgeinsets.all(20), //
margin 設定
decoration: boxdecoration( // 背景顏色的設定
color: colors.red
),);

3、將字型用center括起來可以實現字型居中

var container =container(

child: center(
child: text(
'hello world',
),),
);

4、通過edgeinsets.only()設定指定方向的邊距，通過borderradius設定圓角

var container =container(

width: 
300,
height: 
100,
margin: edgeinsets.only( 
//設定指定方向的外邊距
top: 10.0
, left: 
10.0
), decoration: boxdecoration(
color: colors.red,
borderradius: borderradius.all(
const radius.circular(8.0
), )
),);

5、通過 boxshadow() 設定盒子的陰影

var container =container(

width: 
300,
height: 
100,
margin: edgeinsets.only(
top: 10,
left: 
10),
decoration: boxdecoration(
color: colors.red,
borderradius: borderradius.all(
const radius.circular(8.0
), ),
boxshadow: [
boxshadow(
color: colors.black,
offset: offset(
0, 0
), blurradius: 10)]),
);

flutter學習 布局

名稱 型別說明 scrolldirection axis axis.horizontal axis.vertical padding edgeinsetsgeometry 內邊距resolve bool 元件反向排序 children list 列表元素 listview.builder itemc...

flutter 之 布局學習

flutter 中的布局常用的有 container row column static 等 有了這些 基本上都能搭配出不同的ui介面了 今天來逐一介紹 container flutter 中的uiview class layoutdemo extends statelesswidget 如上 會顯...

flutter頁面布局一

在 html 中常見的布局標籤都有 padding 屬性，但是 flutter 中很多 widget 是沒有 padding 屬性。這個時候我們可以用 padding 元件處理容器與子元素直接的間距。該元件接收兩個屬性 例如，要實現前面的網格布局裡面的單元格之間的間距，就可以使用padding元件。...