主頁 > 作業系統 > 關于底部溢位資訊的解釋

關于底部溢位資訊的解釋

2021-10-12 00:56:37 作業系統

我正試圖理解以下的腳手架:

 return Scaffold(
      floatingActionButton: FloatingActionButton(
        孩子。Icon(Icons.add),
        背景顏色: Colors.green,
        前景顏色: Colors.white,
        onPressed: () {
          PostCrud().crearNuevoPostTest(_miId)。
        },
      ),
      body: 欄目(
        兒童。[
          StreamBuilder<List<OtroUsuario>> (
              stream: otrosUsuariosBloc.todosOtrosUsuarios()。
              builder: (context, snapshot) {
                if (!snapshot.hasData) return CircularProgressIndicator()。

                return Padding(
                  padding。const EdgeInsets.only(top: 8.0)。
                  孩子。容器(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        展開(
                          child: ListView.builder(
                              scrollDirection: Axis.horizontal,
                              itemCount: snapshot.data.length   1,
                              itemBuilder。(context, index) {
                                if (index == 0) {
                                  return Padding(
                                    padding: const EdgeInsets.all(8.0)。
                                    孩子。GestureDetector()
                                      onTap: () {},
                                      孩子。列(
                                        children: [
                                          容器(
                                            width: 67,
                                            高度。67。
                                            邊距。const EdgeInsets.all(10)。
                                            裝飾。BoxDecoration(
                                                形狀。BoxShape.circle,
                                                影像。裝飾圖片()
                                                  適合。BoxFit.fill,
                                                  影像。資產影像(
                                                      "assets/images/buscar_usuario.png"/span>)。)
                                                )),
                                          ),
                                        ],
                                      ),
                                    ),
                                  );
                                } else {
                                  var otro_usuario = snapshot.data[index - 1] 。

                                  bool is_ambassador = false;
                                  is_ambassador = otro_usuario.is_ambassador。

                                  if (is_ambassador) {
                                    return GestureDetector(
                                      孩子。Stack(
                                        對齊。AlignmentDirectional.center,
                                        溢位。Overflow.visible,
                                        兒童。[
                                          列(
                                            children: [
                                              容器(
                                                width: 65,
                                                高度。65。
                                                邊距。
                                                    const EdgeInsets.all(10)。
                                                裝飾。BoxDecoration(
                                                    邊界。border.all(
                                                      color: Colors.black,
                                                      width: 3,
                                                    ),
                                                    形狀。BoxShape.circle,
                                                    影像。裝飾影像(
                                                      適合。BoxFit.fill,
                                                      影像。NetworkImage(
                                                          otro_usuario
                                                              .profile_image)。)
                                                    )),
                                              ),
                                              Text(otro_usuario.username,
                                                  風格。TextStyle(
                                                      fontWeight:
                                                          FontWeight.bold,
                                                      color: Colors.red))。
                                            ],
                                          ),
                                          定位(
                                            左邊。61,
                                            頂部。52,
                                            孩子。容器(
                                                高度。22,
                                                寬度: 22,
                                                孩子。影像(
                                                    影像。資產影像(
                                                        "assets/images/home_ambassador.png"))。
                                          ),
                                        ],
                                      ),
                                      onTap: () {},
                                    );
                                  } else {
                                    return GestureDetector(
                                      孩子。列(
                                        children: [
                                          容器(
                                            width: 70,
                                            高度。70。
                                            邊距。const EdgeInsets.all(10)。
                                            裝飾。BoxDecoration(
                                                邊界。border.all(
                                                  color: Colors.black,
                                                  width: 3,
                                                ),
                                                形狀。BoxShape.circle,
                                                影像。裝飾影像(
                                                  適合。BoxFit.fill,
                                                  影像。NetworkImage(
                                                      otro_usuario
                                                          .profile_image)。)
                                                )),
                                          ),
                                          文本(
                                            otro_usuario.username,
                                            風格。TextStyle(
                                                fontWeight: FontWeight.bold)。)
                                          ),
                                        ],
                                      ),
                                      onTap: () {},
                                    );
                                  }
                                }
                              }),
                        ),
                      ],
                    ),
                  ),
                );
              }),
          容器(
            高度。MediaQuery.of(context).size.height。
            width: MediaQuery.of(context).size.width,
            color: Colors.teal,
          )
        ],
      ),
    );
  }
}

我應該在螢屏頂部看到一個水平串列視圖和一個茶色背景的空容器,但我只看到一個茶色的螢屏,底部溢位36像素的資訊和一個浮動按鈕。

螢屏截圖:

在此輸入圖片描述

我想知道為什么在所有設備(iPhone 12、iPhone 7、Android等)中都是36個像素,為什么不顯示串列視圖。

uj5u.com熱心網友回復:

似乎你正在使用height: MediaQuery.of(context).size.height,的螢屏只是用于容器,并使用Column作為它的父物件,但其他的子物件卻沒有得到任何空間。你可以用 body: ColumnSingleChildScrollView。第二個問題出現在用ListView.builder包裹Expanded。通過用SizedBox(height:X,包裹解決了這個問題。

 SizedBox(
            高度。200, // depend on childrens size。
            孩子。ListView.builder(.)

Expanded包裝是行不通的,因為listView的祖先Column(post padding)的尺寸沒有被定義,而且column parents也來自Column Widget。你可以用SizedBox和Column包起來,這也會解決這個問題。

這是完整的Widget,我對這些部分進行了評論。但在這種情況下,我更喜歡CustomScrollView

在此輸入圖片描述

希望你能得到這個片段

return Scaffold( floatingActionButton: FloatingActionButton( 孩子。Icon(Icons.add), 背景顏色: Colors.green, 前景顏色: Colors.white, onPressed: () { //PostCrud().crearNuevoPostTest(_miId); }, ), body: SingleChildScrollView( 孩子。Column( mainAxisSize: MainAxisSize.min, children: [ // StreamBuilder<List<OtroUsuario>>() //stream: otrosUsuariosBloc.todosOtrosUsuarios(), // builder: (context, snapshot) { // if (!snapshot.hasData) return CircularProgressIndicator(); // return padding( padding。const EdgeInsets.only(top: 8.0)。 孩子。容器( color: Colors.gray.withOpacity(.5)。 //高度: 200, //你可以在這里提供高度。 孩子。Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ // ListView wi get Infinite height and we can not use `Expanded while using [SingleChildScrollView]` SizedBox( 高度。200, // depend on childrens size. 孩子。ListView.builder() 滾動方向。Axis.horizontal, itemCount: 44// snapshot.data.length 1,。 itemBuilder。(context, index) { // return Text("item $index"); if (index == 0) { return Padding( padding: const EdgeInsets.all(8.0)。 孩子。GestureDetector() onTap: () {}, 孩子。列( children: [ 容器( width: 67, 高度。67。 邊距。const EdgeInsets.all(10)。 裝飾。BoxDecoration( 形狀。BoxShape.circle, 影像。裝飾圖片() 適合。BoxFit.fill, 影像。資產影像( "assets/images/buscar_usuario.png"/span>)。) )), ), ], ), ), ); } else { //var otro_usuario = snapshot.data[index - 1]; bool is_ambassador = true。 is_ambassador = 1 < 2; // otro_usuario.is_ambassador;. // return Text("On Else");. if (is_ambassador) { return GestureDetector( 孩子。Stack( 對齊。AlignmentDirectional.center, 溢位。Overflow.visible, 兒童。[ 列( children: [ 容器( width: 65, 高度。65。 邊距。const EdgeInsets.all(10)。 裝飾。BoxDecoration( 邊界。border.all( color: Colors.black, width: 3, ), 形狀。BoxShape.circle, 影像。裝飾影像( 適合。BoxFit.fill, 影像。網路影像( " otro_usuario.profile_image"。 ), )), ), 文本( "otro_usuario.username"。 風格。TextStyle( fontWeight: FontWeight.bold, color: Colors.red, ), ), ], ), 定位( 左邊。61, 頂部。52, 孩子。容器( 高度。22, 寬度: 22, 孩子。影像( 影像。資產影像( "assets/images/home_ambassador.png"))。 ), ], ), onTap: () {}, ); } else { return GestureDetector( 孩子。列( children: [ 容器( width: 70, 高度。70。 邊距。const EdgeInsets.all(10)。 裝飾。BoxDecoration( 邊界。border.all( color: Colors.black, width: 3, ), 形狀。BoxShape.circle, 影像。裝飾影像( 適合。BoxFit.fill, 影像。網路影像( " otro_usuario.profile_image")。) )), ), 文本( " otro_usuario.username", 風格。TextStyle( fontWeight: FontWeight.bold)。) ), ], ), onTap: () {}, ); } } }), ), ], ), ), // }。 ), 容器( 高度。MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, color: Colors.teal, ) ], ), ), );

uj5u.com熱心網友回復:

試試下面的代碼,在SingleChildScrollView()里面添加你的柱子

SingleChildScrollView( 孩子。Column( children:[ //Your Widgets

uj5u.com熱心網友回復:

你可以嘗試用這個來替換你的列,用ListView

ListView(
    shirkWrap: true。
    物理學。ScrollPhysics(),
    兒童。[
       //add your streambuilder()。
       ]
     )

uj5u.com熱心網友回復:

快取可以有一個背景

return Scaffold( backgroundColor: YourColor, floatingActionButton: FloatingActionButton( 孩子。Icon(Icons.add), 背景顏色: Colors.green, 前景顏色: Colors.white, onPressed: () { PostCrud().crearNuevoPostTest(_miId)。 }, ), body: 欄目( 兒童。[ //Your Streambuilder an beyond,//嘗試洗掉下面的容器,//如果你想讓小工具等東西可以滾動,請將你的列包起來//SingleSchildScrollView。 ] ) );

在你的streambuilder里面有一個widget,加上它也吃空間,這意味著它指定了螢屏的某些部分,加上你在Column下面放了一個Container,使它重疊,你做了一個Container,并呼叫Mediaquery,使螢屏尺寸達到全屏。

轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/309230.html

標籤:

上一篇:Vue的div顯示網格去除行與行之間的額外空間

下一篇:如何在flutter中根據方向的變化來改變狀態欄和導航欄的顏色

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • CA和證書

    1、在 CentOS7 中使用 gpg 創建 RSA 非對稱密鑰對 gpg --gen-key #Centos上生成公鑰/密鑰對(存放在家目錄.gnupg/) 2、將 CentOS7 匯出的公鑰,拷貝到 CentOS8 中,在 CentOS8 中使用 CentOS7 的公鑰加密一個檔案 gpg -a ......

    uj5u.com 2020-09-10 00:09:53 more
  • Kubernetes K8S之資源控制器Job和CronJob詳解

    Kubernetes的資源控制器Job和CronJob詳解與示例 ......

    uj5u.com 2020-09-10 00:10:45 more
  • VMware下安裝CentOS

    VMware下安裝CentOS 一、軟硬體準備 1 Centos鏡像準備 1.1 CentOS鏡像下載地址 下載地址 1.2 CentOS鏡像下載程序 點擊下載地址進入如下圖的網站,選擇需要下載的版本,這里選擇的是Centos8,點擊如圖所示。 決定選擇Centos8后,選擇想要的鏡像源進行下載,此 ......

    uj5u.com 2020-09-10 00:12:10 more
  • 如何使用Grep命令查找多個字串

    如何使用Grep 命令查找多個字串 大家好,我是良許! 今天向大家介紹一個非常有用的技巧,那就是使用 grep 命令查找多個字串。 簡單介紹一下,grep 命令可以理解為是一個功能強大的命令列工具,可以用它在一個或多個輸入檔案中搜索與正則運算式相匹配的文本,然后再將每個匹配的文本用標準輸出的格式 ......

    uj5u.com 2020-09-10 00:12:28 more
  • git配置http代理

    git配置http代理 經常遇到克隆 github 慢的問題,這里記錄一下幾種配置 git 代理的方法,解決 clone github 過慢。 目錄 git配置代理 git單獨配置github代理 git配置全域代理 配置終端環境變數 git配置代理 主要使用 git config 命令 git單獨 ......

    uj5u.com 2020-09-10 00:12:33 more
  • Linux npm install 裝包時提示Error EACCES permission denied解

    npm install 裝包時提示Error EACCES permission denied解決辦法 ......

    uj5u.com 2020-09-10 00:12:53 more
  • Centos 7下安裝nginx,使用yum install nginx,提示沒有可用的軟體包

    Centos 7下安裝nginx,使用yum install nginx,提示沒有可用的軟體包。 18 (flaskApi) [root@67 flaskDemo]# yum -y install nginx 19 已加載插件:fastestmirror, langpacks 20 Loading ......

    uj5u.com 2020-09-10 00:13:13 more
  • Linux查看服務器暴力破解ssh IP

    在公網的服務器上經常遇到別人爆破你服務器的22埠,用來挖礦或者干其他嘿嘿嘿的事情~ 這種情況下正確的做法是: 修改默認ssh的22埠 使用設定密鑰登錄或者白名單ip登錄 建議服務器密碼為復雜密碼 創建普通用戶登錄服務器(root權限過大) 建立堡壘機,實作統一管理服務器 統計爆破IP [root ......

    uj5u.com 2020-09-10 00:13:17 more
  • CentOS 7系統常見快捷鍵操作方式

    Linux系統中一些常見的快捷方式,可有效提高操作效率,在某些時刻也能避免操作失誤帶來的問題。 ......

    uj5u.com 2020-09-10 00:13:31 more
  • CentOS 7作業系統目錄結構介紹

    作業系統存在著大量的資料檔案資訊,相應檔案資訊會存在于系統相應目錄中,為了更好的管理資料資訊,會將系統進行一些目錄規劃,不同目錄存放不同的資源。 ......

    uj5u.com 2020-09-10 00:13:35 more
最新发布
  • vim的常用命令

    Vim的6種基本模式 1. 普通模式在普通模式中,用的編輯器命令,比如移動游標,洗掉文本等等。這也是Vim啟動后的默認模式。這正好和許多新用戶期待的操作方式相反(大多數編輯器默認模式為插入模式)。 2. 插入模式在這個模式中,大多數按鍵都會向文本緩沖中插入文本。大多數新用戶希望文本編輯器編輯程序中一 ......

    uj5u.com 2023-04-20 08:43:21 more
  • vim的常用命令

    Vim的6種基本模式 1. 普通模式在普通模式中,用的編輯器命令,比如移動游標,洗掉文本等等。這也是Vim啟動后的默認模式。這正好和許多新用戶期待的操作方式相反(大多數編輯器默認模式為插入模式)。 2. 插入模式在這個模式中,大多數按鍵都會向文本緩沖中插入文本。大多數新用戶希望文本編輯器編輯程序中一 ......

    uj5u.com 2023-04-20 08:42:36 more
  • docker學習

    ###Docker概述 真實專案部署環境可能非常復雜,傳統發布專案一個只需要一個jar包,運行環境需要單獨部署。而通過Docker可將jar包和相關環境(如jdk,redis,Hadoop...)等打包到docker鏡像里,將鏡像發布到Docker倉庫,部署時下載發布的鏡像,直接運行發布的鏡像即可。 ......

    uj5u.com 2023-04-19 09:26:53 more
  • 設定Windows主機的瀏覽器為wls2的默認瀏覽器

    這里以Chrome為例。 1. 準備作業 wsl是可以使用Windows主機上安裝的exe程式,出于安全考慮,默認情況下改功能是無法使用。要使用的話,終端需要以管理員權限啟動。 我這里以Windows Terminal為例,介紹如何默認使用管理員權限打開終端,具體操作如下圖所示: 2. 操作 wsl ......

    uj5u.com 2023-04-19 09:25:49 more
  • docker學習

    ###Docker概述 真實專案部署環境可能非常復雜,傳統發布專案一個只需要一個jar包,運行環境需要單獨部署。而通過Docker可將jar包和相關環境(如jdk,redis,Hadoop...)等打包到docker鏡像里,將鏡像發布到Docker倉庫,部署時下載發布的鏡像,直接運行發布的鏡像即可。 ......

    uj5u.com 2023-04-19 09:19:04 more
  • Linux學習筆記

    IP地址和主機名 IP地址 ifconfig可以用來查詢本機的IP地址,如果不能使用,可以通過install net-tools安裝。 Centos系統下ens33表示主網卡;inet后表示IP地址;lo表示本地回環網卡; 127.0.0.1表示代指本機;0.0.0.0可以用于代指本機,同時在放行設 ......

    uj5u.com 2023-04-18 06:52:01 more
  • 解決linux系統的kdump服務無法啟動的問題

    問題:專案麒麟系統服務器的kdump服務無法啟動,沒有相關日志無法定位問題。 1、查看服務狀態是關閉的,重啟系統也無法啟動 systemctl status kdump 2、修改grub引數,修改“crashkernel”為“512M(有的機器數值太大太小都會導致報錯,建議從128M開始試,或者加個 ......

    uj5u.com 2023-04-12 09:59:50 more
  • 解決linux系統的kdump服務無法啟動的問題

    問題:專案麒麟系統服務器的kdump服務無法啟動,沒有相關日志無法定位問題。 1、查看服務狀態是關閉的,重啟系統也無法啟動 systemctl status kdump 2、修改grub引數,修改“crashkernel”為“512M(有的機器數值太大太小都會導致報錯,建議從128M開始試,或者加個 ......

    uj5u.com 2023-04-12 09:59:01 more
  • 你是不是暴露了?

    作者:袁首京 原創文章,轉載時請保留此宣告,并給出原文連接。 如果您是計算機相關從業人員,那么應該經歷不止一次網路安全專項檢查了,你肯定是收到過資訊系統技術檢測報告,要求你加強風險監測,確保你提供的系統服務堅實可靠了。 沒檢測到問題還好,檢測到問題的話,有些處理起來還是挺麻煩的,尤其是線上正在運行的 ......

    uj5u.com 2023-04-05 16:52:56 more
  • 細節拉滿,80 張圖帶你一步一步推演 slab 記憶體池的設計與實作

    1. 前文回顧 在之前的幾篇記憶體管理系列文章中,筆者帶大家從宏觀角度完整地梳理了一遍 Linux 記憶體分配的整個鏈路,本文的主題依然是記憶體分配,這一次我們會從微觀的角度來探秘一下 Linux 內核中用于零散小記憶體塊分配的記憶體池 —— slab 分配器。 在本小節中,筆者還是按照以往的風格先帶大家簡單 ......

    uj5u.com 2023-04-05 16:44:11 more