Flutter 基本布局

2022-05-07 10:48:08 字數 2215 閱讀 2279

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