本篇部落格大致介紹了通過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元件。...