flutter簡單布局入門demo

2021-10-02 15:50:39 字數 2518 閱讀 4244

布局效果

**`import 『package:flutter/material.dart』;

);

//定義副標題

final subtitle = text(

'不是標題是文字啊 疫情嚴重 在家學習flutter,laiya 苦熬快活啊 為什麼 怎麼辦 我的人啊 希望你 遇見了就少疫情嚴重 就不要出來餓了啊',

textalign:textalign.center,

style: textstyle(

letterspacing: 0.5,

fontsize: 20

),);

final ratings = container(

padding:edgeinsets.all(20),

child: row(

mainaxisalignment: mainaxisalignment.spaceevenly,//排列方式 均勻分布 五顆星

children: [

row(

children: [ icon(icons.star,color: colors.black,),

icon(icons.star,color: colors.black,),

icon(icons.star,color: colors.black,),

icon(icons.star,color: colors.black,),

icon(icons.star,color: colors.black,)],

),text('100分',

style: textstyle(

fontsize: 18),)

],),

);/**

* 定義乙個樣式 用於大多數相同字型

*/final mytextstyle =textstyle(

color: colors.black87,

fontsize: 26,

fontfamily: 'roboto',

letterspacing: 0.2

);final iconlist =defaulttextstyle.merge( //合併乙個樣式22和我自定義的一起

style: mytextstyle,//這就是我們合併的樣式

child: container(

padding: edgeinsets.all(20),

child: row(

mainaxisalignment: mainaxisalignment.spaceevenly,//排列方式

children: [

column(

children: [

icon(icons.access_alarm),

text('時間'),

text('一周')

],),

column(

children: [

icon(icons.account_balance),

text('位址'),

text('北京')

],),

column(

children: [

icon(icons.add_call),

text('**'),

text('110')],)

],),

));final leftcolumn = container(

padding: edgeinsets.symmetric(horizontal: 20,vertical: 30), //指定間距 還有其他方法

); title: 'flutter應用',//任務管理器name 只有安卓應用才有

theme: themedata

(primaryswatch: colors.blue,

),title: text('哈哈哈啊哈')

),body:center(

child:container(

margin: edgeinsets.all(10),

height: 600,

child: card(

child: row(

children: [container(

width: 440,

child: leftcolumn,//防止巢狀過深 提出來封裝成乙個元件

),mainimage

],),

),),

),) ,

);

}

`

Flutter入門(二) 布局

網格布局 class homecontent extends statelesswidget return templist.tolist override widget build buildcontext context 效果圖 優化class homecontent extends state...

flutter學習 布局

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

Flutter 基本布局

本篇部落格大致介紹了通過flutter實現一些簡單的頁面布局,官方的參考文件 首先,專案的入口如下,後面的所有操作都是對container變數進行更改 import package flutter material.dart class override widget build buildcont...