Flutter（58）：Layout組件之SizedBox

一個特定大小的盒子。這個widget給予子控件寬度和高度。如果寬度或高度為null，則此widget將調(diào)整自身大小以匹配子控件的大小。

專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站建設(shè)服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)清流免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

盡可能大的在父控件的約束內(nèi)顯示

盡可能小的在父控件的約束內(nèi)顯示

以Size尺寸約束

下一節(jié)：Layout組件之Transform

Flutter開發(fā)Windows 和 Linux 桌面應用，設(shè)置默認窗口大小

在用Flutter 開發(fā)windows和linux跨平臺應用的時候，如何設(shè)置默認窗口大小呢？

flutter沒有提供統(tǒng)一的api，所以默認的窗口大小是1280x720.

如果我們想要改成自己想要的默認窗口大小呢？比如我想要設(shè)置為：512像素寬, 926像素高

我該怎么做呢？

請看我的教程。

首先你確保你已經(jīng)為項目創(chuàng)建了windows和Linux的支持。

目前Flutter 為windows和linux提供的是托管式運行的主程序，可以理解為一個殼子，這個殼子就是用cpp寫的，平臺原生的window 窗口。

所以我們可以打開相應的cpp源代碼，設(shè)置默認窗口大小。

這里先講windows和linux，因為mac 平臺跟windows和linux不一樣，后面單獨給大家講解。

我們看圖。

源代碼路徑位于：

windows/runner/main.cpp

找到

第一個參數(shù)是寬度，單位是px，第二個是高度，單位是px

修改后重新運行生效。

源代碼路徑位于：

linux/my_application.cc

找到

方法的第一個數(shù)字是寬度，第二個是高度，單位也是px像素。

修改后，重新運行生效。

現(xiàn)在，你已經(jīng)學會了如何設(shè)置初始窗口大小了。

Flutter 之 Sliver 系列控件

SliverAppBar 控件，一個 MD 的 AppBar 。屬性和 AppBar 類似，但做的效果比 AppBar 更加強大。相同的屬性具體可以看 Flutter 之 Scaffold 控件 ， 里面有 AppBar 控件的介紹。那么還有些沒有的屬性：

結(jié)合 elevation 使用，當elevation 不為 0 的時候，是否顯示陰影

AppBar 展開時候的高度

true 的時候下滑AppBar優(yōu)先滑動展示，展示完成后才給滑動控件滑動

snap 為 true, 則 floating 也要為 true 。true 的時候根據(jù)手指松開的位置展開或者收縮AppBar

appBar 收縮到最小高度的時候 appBar 是否可見

SliverAppBar 往往做為 CustomScrollView 的第一個子元素，根據(jù)滾動控件的偏移量或者浮動的位置來改變 SliverAppBar 的高度。所以具體用法如下

另外在上面設(shè)計到 FlexibleSpaceBar 控件，F(xiàn)lexibleSpaceBar 有個 collapseMode 屬性

為 Sliver 系列控件添加一個 padding 。如給上面 SliverAppBar 添加一個 Padding 。

多行多列的列表控件，相當于 Android 的 GridView，有兩個屬性

SliverChildDelegate，這里有兩種方式創(chuàng)建

SliverGridDelegate，也是有兩種方式創(chuàng)建

結(jié)合上面展示效果

和上面 delegate 屬性一樣，需要創(chuàng)建一個 SliverChildDelegate 。

比 SliverList 多一個 itemExtent 屬性，設(shè)置 item 的高度 。item 里面的子控件無法再改動高度。

上面 SliverAppBar 就是結(jié)合 SliverPersistentHeader 實現(xiàn)的效果，SliverPersistentHeader 需要一個 SliverPersistentHeaderDelegate 。 實現(xiàn) SliverPersistentHeaderDelegate 有 4 個方法需要重寫

至于效果，具體效果具體分析。

有一個 Widget 屬性，主要作用是在 CustomScrollView 里面添加多種不同布局的樣式。

占滿一屏或者比一屏更多的布局，

滑動剩余部分展示的布局

Flutter基礎(chǔ)Widget之按鈕（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中給我們預先定義好了一些按鈕控件給我們用，常用的按鈕如下

我們先來看看MaterialButton中的屬性，可以看到能設(shè)置的屬性還是很多的。

下面我們來看看常用屬性

而在Android中如果我們要修改按鈕樣式的話，需要通過selector和Shape等方式進行修改，相比較Flutter來說是要麻煩不少的

RaisedButton的構(gòu)造方法如下，由于繼承自MaterialButton，所以MaterialButton中的大多數(shù)屬性這邊都能用，且效果一致，這里就不在贅述了

下面我們來看一下屬性

接收一個方法，點擊按鈕時回調(diào)該方法。如果傳null，則表示按鈕禁用

如下圖所示

按鈕文本控件，一般都是傳一個Text Widget

按鈕顏色

按鈕的文本顏色

點擊按鈕時水波紋顏色

高亮顏色，點擊（長按）按鈕后的顏色

陰影范圍，一般不會設(shè)置太大

內(nèi)邊距,使用

或者

shape用來設(shè)置按鈕的形狀，其接收值是ShapeBorder類型，ShapeBorder是一個抽象類，我們來看看有哪些實現(xiàn)類

可以看到，實現(xiàn)類還是很多的，我們主要來看看常用的即可。

borderRadius 接收一個BorderRadius類型的值，常用方法如下

我們可以把borderRadius分為上下左右四個方向，下面的方法都是對這四個方向進行設(shè)置，

帶斜角的長方形邊框

圓形邊框

圓角矩形

兩端是半圓的邊框

FlatButton跟RaisedButton用法基本一致，下面我們就直接用一下

注意，OutlineButton是一個有默認邊線且背景透明的按鈕，也就是說我們設(shè)置其邊線和顏色是無效的，其他屬性跟MaterialButton中屬性基本一致

下面我們直接來使用

效果如下：

IconButton是直接繼承自StatelessWidget的，默認沒有背景

我們來看一下他的構(gòu)造方法

可以看到，icon是必填參數(shù)

icon接收一個Widget，但是一般我們都是傳入一個Icon Widget

其他屬性跟MaterialButton中的屬性用法基本一致

我們來用一下

效果如下：

我們也可以傳一個Text或其他Widget，這個大家自行嘗試吧

如果我們需要設(shè)置按鈕的最小寬度以及高度，button屬性中并沒有提供對應的設(shè)置方法

使用如下：

Flutter中Button內(nèi)容大概就是這些

Flutter踩坑之旅

記錄下自己踩過的坑,怕忘了

一.TextField:

1.去掉輸入數(shù)字的計數(shù):decoration中的counterStyle: TextStyle(color: Colors.transparent).

2.去掉獲取和失去焦點時邊框改變顏色的效果:decoration內(nèi)border: InputBorder.none,

3.去邊框時設(shè)置BorderSide的width為0或color: Colors.transparent后依然存在邊框時,需要設(shè)置為borderSide: BorderSide.none

4.設(shè)置背景色需要在decoration內(nèi) ? ? filled:true, ? fillColor: Colors.blue同時設(shè)置才會顯示

二.Uint8List類型和string類型,Listint的轉(zhuǎn)換

連續(xù)兩次base64解碼時,參數(shù)只能使用string類型,但是base64解碼后是Uint8List類型,此時需要將Uint8List類型轉(zhuǎn)換為string類型,使用:utf8.decode(Uint8List)即可,需要import 'dart:convert';

Listint轉(zhuǎn)Uint8List:讀取接口時獲取的數(shù)據(jù)是Listint的圖片數(shù)據(jù),想顯示時需要轉(zhuǎn)成Uint8List,然后使用Image.memory(),使用:Uint8List.fromList(Listint)即可

三.報錯:DioError [DioErrorType.DEFAULT]: FormatException: Unexpected character (at character 1)MGFlMFo0NEZ3RWNMbE5YbGNGOXZGcUlJdUhIS2x2Q3NlckxqWXlEeG5JWndZdXIrSUpLN3ZOczR...

這是因為dio請求返回的數(shù)據(jù)默認是以json的格式讀取的,而返回的數(shù)據(jù)是密文形式,需要修改dio的Options的responseType為ResponseType.PLAIN,這樣返回的數(shù)據(jù)就以字符串形式處理.

四.去掉點擊控件背景出現(xiàn)的水波紋效果,即去掉md的效果:

在main.dart的MaterialApp內(nèi)的theme加上splashColor: Colors.transparent

五.布局去掉沉浸式效果和布局設(shè)置占滿全屏卻無效的問題

使用Scaffold的body的布局默認是沉浸式的,將狀態(tài)欄一起包含了,可以通過在body后添加一層SafeArea即可.

布局設(shè)置double.infinity占滿全屏高度卻無效,大部分情況都是因為某一級的父布局的高度已經(jīng)有了限制,所以設(shè)置充滿屏幕只會充滿父布局,有些widget默認是按內(nèi)容填充類似wrap_content就會導致寫布局的過程中自己沒有限制高度但最后的布局不是自己想要的,可以給各個父布局設(shè)置不同背景顏色來查看是從哪兒開始被限制了高度來排查問題.

六.占滿剩余空間,類似android的match_parent可以使用double.infinity

七.LinearProgressIndicator

1.LinearProgressIndicator設(shè)置進度值的顏色為單一顏色:valueColor : new AlwaysStoppedAnimation(Color(JColor.blue))

2.給LinearProgressIndicator設(shè)置圓角:ClipRRect(

borderRadius:BorderRadius.circular(60.0),

child:LinearProgressIndicator(value:0.2,backgroundColor:Color(JColor.grayBg),valueColor:new AlwaysStoppedAnimation(Color(JColor.blue)),

)

八.Expanded:

1.若嵌套多層column且內(nèi)容的高度都不確定需要占滿剩余空間,需要每層的column的內(nèi)容都嵌套一層expanded來申明每層都占滿剩余的空間,否則最里面的內(nèi)容層需要指定高度,不然會報錯

九.Container設(shè)置最小/大寬度或高度:

constraints:BoxConstraints(minHeight:56),

十.滑動的widget嵌套:

1.解決滑動沖突:內(nèi)層嵌套的滑動widget設(shè)置physics:NeverScrollableScrollPhysics()

2.解決滑動嵌套ui顯示不出來或者報錯,內(nèi)層的滑動widget設(shè)置shrinkWrap:true

十一.使用multi_image_picker: ^4.3.4安卓運行報錯Didn't find class "com.sangcomz.fishbun.FishBunFileProvider"

1.需要android工程支持androidx,需要在android工程的gradle.properties內(nèi)添加android.enableJetifier=true和android.useAndroidX=true并點擊右上角的open for editing in android studio,運行成功后就可以了

十二.使用textfield時的文字ui總是很高

使用了maxlength且只是在textfield的InputDecoration設(shè)置counterStyle的顏色為透明使下面的計數(shù)文字消失會導致文字ui很高,counter的計數(shù)文字只是顏色是透明但依然在布局中占了位置所以導致文字很高,直接使用counterText:""即可

十三.使用ListView報錯Vertical viewport was given unbounded height

需要將ListView放入Expanded內(nèi)部

本文名稱：flutter最小高度,flutter行高
鏈接地址：http://chinadenli.net/article16/dseijgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設(shè)、建站公司、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計公司、微信小程序、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)