Flutter布局總結(一) 單個widget

2021-08-21 22:20:38 字數 1507 閱讀 4319

flutter布局機制的核心是widget

首先了解下布局結構

此ui顯示乙個行包含3列,其中每列包含乙個圖示和乙個標籤

uiwidget樹圖如下:

container是乙個widget,允許自定義其子widget。如果要新增填充、邊距、邊框或者是背景色,需要使用container來設定

flutter中布局單個widget

建立乙個widget容納可見物件。如建立乙個text widget

new text('hello world', style: new textstyle(fontsize: 32.0))
選擇乙個布局widget,將可見widget新增到布局widget中。如將text widget新增到center widget中:

new center(

child: new text('hello world', style: new textstyle(fontsize: 32.0))

所有布局widget都有乙個child屬性(如center或container),或者乙個children屬性(如row、column、listview或stack,設定widget列表)

將布局widget新增到頁面

flutter應用本身是乙個widget,大部分widget都有乙個build()方法。在應用程式的build()中新增布局widget

如對於material應用程式,將center widget新增到body屬性中:

class

_myhomepagestate

extends

state }

對於非material應用程式,將center widget新增到應用程式的build()中:

import

'package:flutter/material.dart';

void main()

class

extends

statelesswidget }

flutter頁面布局一

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

css布局總結(一)

1.一列定寬,一列自適應 兩列在同一行 第乙個元素必須脫離或半脫離文件流 右邊一列要佔滿剩餘的寬度 塊級元素寬高會自動預設充滿剩下螢幕 預設左邊先顯示 float margin float bfc 有重要內容先顯示 右側先 float 負外邊距 右側主體自適應區塊 左側定寬200px區塊 先顯示的放...

布局的一點總結

1.box布局 box布局實現了浮動,並且預設沿著一行排列div。超過部分在頁面可視區域之外 一行的右邊 超過部分不會跑到下一行。box布局的好處 如果左對齊,不用考慮子元素的寬度,box 就可以實現真正意義上的流體布局。只要給出相應屬性,瀏覽器會幫我們做額外的計算。2.選擇按鈕 如果用input的...