「4.0」一個人開發一個App,小程式從0到1,佈局

来源:https://www.cnblogs.com/halfcode/archive/2020/01/23/12230568.html
-Advertisement-
Play Games

如果你剛剛說開心,說雞凍,說嘚瑟,那你完了,你高興得太早了,畢竟小程式佈局的技術,Flex都還沒開始學,等學會再嘚瑟吧。 Flex是Flexible Box的縮寫,意為”彈性佈局”,可以支持從左到右,從上到下...... ...


一提到佈局這個詞,我總是索索發抖,不是因為天冷,而是因為佈局的目標實在太巨集大。古代想雄霸天下的王,就喜歡佈局這個,佈局那個,結果硬生生把自己的國家給佈局沒了。至於是哪個君王,我倒可以非常認真,非常坦誠地告訴你,那個人不是我,也不是你。

否則我們哪有時間在這裡用小程式佈局手機界面。一個小小手機界面,就有很多花樣,那跟大餅臉臉一樣大的平板, 不是需要花費更多功夫?

其實可以不是的,只要你在佈局界面的時候,留多點空白就好了。更最簡單的辦法,就是全部空白,什麼都不放,只是這樣的話,老闆會讓你早點滾蛋。如果不想滾,還是老老實實地佈局吧。

4.1  佈局

小程式的佈局,可從左到右,從上到下;可從右到左,從下到上;可左青龍右白虎,上朱雀下玄武。反正,正反都可以,你喜歡就好。

如果從左到右佈局,那就是橫向佈局;從右到左,那就是反橫向佈局;如果從上到下,就是縱向佈局,從下到上,就是反縱向佈局。橫縱佈局,是古代兵家常用的戰略,沒想到程式員也懂。開不開心,雞不雞凍,嘚不嘚瑟?

如果你剛剛說開心,說雞凍,說嘚瑟,那你完了,你高興得太早了,畢竟小程式佈局的技術,Flex都還沒開始學,等學會再嘚瑟吧。

Flex是Flexible Box的縮寫,意為”彈性佈局”,可以支持從左到右,從上到下,

從右到左,從下到上,左青龍右白虎,上朱雀下玄武。

先來左右和上下的,然後,然後就沒有然後了。打開index.wxss,洋洋灑灑地敲下如下代碼。

/* 橫向佈局:從左到右 */

.zy {

display: flex;

display: -webkit-flex;

flex-direction: row;

justify-content: center;

 

color: #fff;

}

/* 縱向佈局:從上到下 */

.sx {

display: flex;

display: -webkit-flex;

flex-direction: column;

align-items: center;

 

color: #fff;

}

打開index.wxml,洋洋傻傻地輸入如下內容,並運行看看效果,漂不漂亮,正不正點?--說漂亮的都是藝術家,說正點的都是色鬼,愛顏色的鬼。愛顏色的鬼,就是那些最喜歡研究Flex(佈局)的色鬼。

<view class="zy">

<view>第1格</view>

<view>第2格</view>

</view>

<view class="sx">

<view>第3格</view>

<view>第4格</view>

</view>

 

4.2  Flex

又到我秀英語的時刻了,我不用查詞典就可以負責地告訴你:Flex是Flexible Box的縮寫,是彈性佈局的意思,Understand?就算不stand也沒關係的,我還是要接著說的。

flex通過display聲明,用flex-direction指定佈局方向。

4.2.1 佈局方向

左到右值為:row(預設值);

右到左值為:row-reverse;

上到下值為:column;

下到上值為:column-reverse。

4.2.2 橫向對齊

在橫向佈局時,可通過justify-content指定項目的對齊方式。

左對齊:flex-start;

居中對齊:center;

右對齊:flex-end;

兩端對齊:space-between,項目之間的間隔都相等;

間隔相等:space-around,每個項目兩側的間隔;

左青龍右白虎值為:暫不支持,圖片來安慰。沒青龍白虎的,不要找我要,這兩個寵物我不賣。

 

如果橫向內容有太多的話,怎麼對齊都沒用,因為根本放不下。這時可用flex-wrap指定是否換行。nowrap(預設),不換行;wrap:換行,第一行在上方;wrap-reverse:換行,第一行在下方。

4.2.3 縱向對齊

縱向佈局,通過align-items的值指定。

上對齊:flex-start;

居中對齊:center;

下對齊:flex-end;

自動對齊:stretch(預設值), 占滿整個容器的高度;

上朱雀下玄武:暫不支持,圖片來安慰,沒有朱雀玄武的不要找我要,這兩個家禽你養不起。

 

糟了,本來打算介紹代碼的,沒說到動物世界去,這可怎麼辦?--涼拌炒雞蛋,我就亂說一通,看你能把我怎麼樣?--疼,疼,疼,別再打了。再打我就跟產品經理一樣,沙雕了。

一沙雕,忽然發現有個-webkit-flex沒作解釋。可這個真沒什麼好解釋的,它就是為了相容Webkit內核的瀏覽器(如蘋果的Safari)而存在的,你加上就對了。如果實在想弄清楚原因的話,那就打電話給微信的產品經理吧。

你繼續打你的電話,我接著往下說,說下平均佈局。

4.3  平均佈局

在index.wxss文件里,新增如下代碼,可讓橫向項目(view)平均分配。這種寫法,表示在zy下的view組件(項目),都應用這個樣式。這是一種特高級寫法,一般人都學不會,你看兩眼就懂了,厲害,厲害。來,給自己一把掌,權當獎賞。打完之後,可以瞭解一下與子項目相關的屬性。

.zy view {

flex: 1;

border: 1px solid red;

text-align: center;

}

 

4.3.1 子項目屬性

在父(zy)元素flex下的子項目,有6大屬性。

1. order屬性

用來排列項目順序,值(正整數)越小,越靠前;這有插隊嫌疑,本來2排在1後面,卻可通過order這個關係,走到1前面去;

2. flex-shrink屬性

指定項目縮小比例(正整數),當空間不夠時,誰被指定,誰就縮小,誰都不指定,大家一起縮小,好啊,大有有福同享有難你當的滋味;

3. flex-grow屬性

預設值為0。有了,才可以分。這是一個程式員哥哥分梨的故事,程式員對他弟弟說:我是哥哥,比你大,我讓著你,我分2個,你分1個。

在index.wxss文件里新增如下代碼:

/*哥哥來分梨*/

.fl {

display: flex;

display: -webkit-flex;

flex-direction: row;

justify-content: center;

 

color: #fff;

}

.dd {

flex-grow: 1;

border: 1px solid red;

text-align: center;

}

.gg {

flex-grow: 2;

border: 1px solid red;

text-align: center;

}

在index.wxml里,新增如下代碼:

<view class="fl">

<view class="dd">弟弟</view>

<view class="gg">哥哥</view>

</view>

 

4. align-self屬性

允許指定的單個項目,可與其他項目不一樣的對齊方式。

5. flex-basis屬性

指定的項固定大小(長度值,如200rpx)。其餘的別人去分配。

這跟項目經理分配獎金時,是一個樣的。1萬塊的獎金,先給自己留9900元,剩下的100元,由10個程式員自由分配。至於是否真有這回事,我也不清楚。我沒當過項目經理,我一直當的是技術總監。別打我啊,哎呀,哎呦,疼,痛,並快樂著。

6. flex屬性 

flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。

 

好了,今天碼字碼到都得帕金森了,手一直在抖。如果文章對你有所幫助,就轉發出去吧。你一轉發,我的手馬上就好,馬上開始續寫篇章,譜寫下一節的內容,組件組建。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Newtonsoft.Json與System.Text.Json區別 在 Newtonsoft.Json中可以使用例如 方式設置接收/序列化時間格式,但在.net core 3.1中System.Text.Json是沒有自帶方式進行轉換,這就需要自定義Converter實現時間轉換 "官方GitHu ...
  • 今天在Ubuntu伺服器上安裝supervisor,部署沒成功想卸載重來,sudo apt-get remove supervisor 後發現配置文件還在,便手動刪除了配置文件。再次安裝,提示配置文件不存在,WTF!配置文件不該你軟體給我創建嗎?我想。 查閱資料才知,還有 apt-get purge ...
  • (1)、開機進入系統前,按F8,進入Windows 10的高級啟動選項,選擇“修複電腦”。 (2)、選擇鍵盤輸入方法。 (3)、如果有管理員密碼,需要輸入;如果沒有設置密碼,直接“確定”即可。 (4)、進入系統恢覆選項後,選擇“Dell DataSafe 還原和緊急備份”。 (5)、選擇“選擇其他 ...
  • 子查詢 版本要求 MySQL 4.1引入了對子查詢的支持,所以要想使用 本章描述的SQL,必須使用MySQL 4.1或更高級的版本。 SELECT語句 是SQL的查詢。迄今為止我們所看到的所有 SELECT 語句 都是簡單查詢,即從單個資料庫表中檢索數據的單條語句。 查詢(query) 任何SQL語 ...
  • 數據分組 目前為止的所有計算都是在表的所有數據或匹配特定的 WHERE 子句的 數據上進行的。提示一下,下麵的例子返回供應商 1003 提供的產品數目 但如果要返回每個供應商提供的產品數目怎麼辦?或者返回只提供 單項產品的供應商所提供的產品,或返回提供10個以上產品的供應商怎 麽辦? 這就是分組顯身 ...
  • 聚集函數 我們經常需要彙總數據而不用把它們實際檢索出來,為此MySQL提 供了專門的函數。使用這些函數,MySQL查詢可用於檢索數據,以便分 析和報表生成。這種類型的檢索例子有以下幾種。 確定表中行數(或者滿足某個條件或包含某個特定值的行數)。 獲得表中行組的和。 找出表列(或所有行或某些特定的行) ...
  • Ream--(objc)寫事務精簡方案 地址: REALM-- Realm官方提供的的寫事務有兩種方式: A[realm beginWriteTransaction]; // ... [realm commitWriteTransaction]; B [realm transactionWithBl ...
  • 這幾天用自己目前掌握的安卓開發知識製作了一個記事本小程式,在這裡分享一下開發流程,希望可以幫到和我一樣的初學者。 開發工具為Android studio,後臺語言為java,使用的資料庫為安卓的SQLite資料庫,功能及效果圖如下: 主界面,長按可刪除: 點擊加號添加: 主頁面點擊查看,此頁面含修改 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...