flutter頭部tabTop滾動欄

2021-10-04 19:03:04 字數 4277 閱讀 9889

main.dart**如下:

import 'package:flutter/material.dart'

;//啟動函式

void

main()

=>((

));//自定義元件

class

@override

widget build

(buildcontext context)

}//頭部tabtop滾動欄效果元件

import 'package:flutter/material.dart'

;class

@override()

=>()

;}//混合singletickerproviderstatemixin類 同步屬性

class

with singletickerproviderstatemixin

_nextpage

(index)

@override

widget build

(buildcontext context)),

icontheme:

iconthemedata

(color: colors.yellow)

,//頭部icon樣式顏色

//右邊icon圖示 可以多個

actions:

[iconbutton

( icon:

icon

(icons.arrow_forward)

, onpressed:()

)], actionsicontheme:

iconthemedata

(color: colors.white)

,//自定義導航欄

bottom:

preferredsize

( child:

theme

( data: theme.

of(context)

.copywith

(accentcolor: colors.white)

, child:

container

( height:40,

alignment: alignment.center,

//圓點居中

//給自定義導航欄設定圓點控制器

child:

tabpageselector

( controller: _tabcontroller,),

),),

preferredsize: size.

fromheight(48

)),)

,//主體內容

body:

tabbarview

(//主題內容也跟隨控制器變化

controller: _tabcontroller,

//將資料遍歷成n個子元件陣列

children: choices.

map(

(item)).

tolist()

,),)

;}}//choicecard將資料渲染到card卡片元件上

class

choicecard extends statelesswidget ):

super

(key: key)

; @override

widget build

(buildcontext context)

}//資料的型別

class

choice);

final string title;

final icondata icon;

}//模擬的資料

**如下:

//頭部tabtop滾動欄效果元件

class()

:super

(key: key)

; @override()

=>()

;}class

@override

widget build

(buildcontext context))]

, bottom:

tabbar

( isscrollable:

true

, indicatorsize: tabbarindicatorsize.label,

tabs: choices.

map(

(item)).

tolist()

,),)

, body:

tabbarview

( children: choices.

map(

(item)).

tolist()

,),)

);}}

//choicecard將資料渲染到card卡片元件上

class

choicecard extends statelesswidget ):

super

(key: key)

; @override

widget build

(buildcontext context)

}//資料的型別

class

choice);

final string title;

final icondata icon;

}//模擬的資料

const list choices =

const

[const

choice

(title:

'car'

, icon: icons.directions_car)

,const

choice

(title:

'bicycle'

, icon: icons.directions_bike)

,const

choice

(title:

'boat'

, icon: icons.directions_boat)

,const

choice

(title:

'bus'

, icon: icons.directions_bus)

,const

choice

(title:

'train'

, icon: icons.directions_railway)

,const

choice

(title:

'walk'

, icon: icons.directions_walk),]

;

Flutter學習 初識 Flutter

需要注意的資料夾 資料夾用途 android android 平台相關 iosios 平台相關 libflutter 相關 存放原始碼的地方 test 用於存放測試 pubspec.yaml 配置檔案,一般存放一些第三方庫 也可以簡寫 scaffold 是 material design 布局結構的...

IP資料報頭部,TCP頭部,偽TCP頭部結構定義

我自己整理出來的彙編版本 ip資料報頭部結構定義 ip head struct h lenver db 4位ip版本號 4位首部長度 tos db 8位服務型別 tcp len dw 16位tcp資料報總長度 ident dw 16位標識 frag and flags dw 3位分片標誌 13位分片...

python頭部注釋 vim新增頭部注釋

1 先說說python和virtual python 一般環境下,python直譯器會放在 usr bin 下面,然後你執行python的時候就會執行了,但是如果沒有在 usr bin 下面的話,執行python就會找不到,所以這就是 usr bin env python的用處,usr bin en...