From 6a642a65ed813860e28bffa5fdc15435e6f916aa Mon Sep 17 00:00:00 2001 From: sienna1128 Date: Fri, 21 Oct 2022 15:20:03 +0800 Subject: [PATCH] update docs Signed-off-by: sienna1128 --- .../application-dev/ui/figures/direction.png | Bin 0 -> 15320 bytes zh-cn/application-dev/ui/figures/flex.png | Bin 0 -> 18260 bytes .../ui/figures/justifyContent.png | Bin 0 -> 17198 bytes zh-cn/application-dev/ui/ui-ts-layout-flex.md | 700 ++++++++---------- .../application-dev/ui/ui-ts-layout-linear.md | 300 ++++---- 5 files changed, 453 insertions(+), 547 deletions(-) create mode 100644 zh-cn/application-dev/ui/figures/direction.png create mode 100644 zh-cn/application-dev/ui/figures/flex.png create mode 100644 zh-cn/application-dev/ui/figures/justifyContent.png diff --git a/zh-cn/application-dev/ui/figures/direction.png b/zh-cn/application-dev/ui/figures/direction.png new file mode 100644 index 0000000000000000000000000000000000000000..702c9b07fa00b8685415bb83879ead774001ee56 GIT binary patch literal 15320 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 literal 0 HcmV?d00001 diff --git a/zh-cn/application-dev/ui/figures/justifyContent.png b/zh-cn/application-dev/ui/figures/justifyContent.png new file mode 100644 index 0000000000000000000000000000000000000000..2e997f9cba6ce5c2ad93c1f2e33728b7db17bdd3 GIT binary patch literal 17198 zcmeHvcU03$*Y1xl(nLL=(gZ;)G#fR52#Sb;4e1aC#UouxXdzKVP!yCRC<2NiDj*oi~Imh#!@~-=>b?<$@@18$g$}qnvduH}L&$IVbO?mc{5SHQSba2Hwlgoh{ zF@;&4?}X&FL^CyIFjKOd6UIUX@V@t7xgcOyKd067KAWFx92n#lY4gdqpD0kDX?! zxv>n8W7E0xg$>NGUf(e)y}b02&ls;U8%r_h`|ttEsT;`J5Q>y8>?$wH(=latyl2d}tMQRJkCGt1YBSaF+lxj8gUr*mgp*fgimjMj6T4b}@mL(AG3~k6wn?)7UD> z&6tiJX4_=kL*2M*}u{XrtjNY4}BfmSEmzaU&tJ=G@TUQ@P(nb3+un-t{MfUGt`1e;?Rn z0ek;^vo7ypUV%=s9wNrn8)jQc>y=ZJ4f=9m>WNl=RCILbmadKK#UE-ubWoV+Dm zc;+P9EM&D)bo9FCuF-92ou8ouQu0NiFH)-%6b6sVRR?=bYZboc+KjrAKuW>B-l(7; zYW31&r_voz)~`4qBn7_AalPhxNF{>j@Z#6e^((-4Hmcah9oo2IJvP<|d=YE4OKCN? zu(-HeGGuJ>Rz(T7N_>a8poWP_<8e-Lk$*cB+F;+Gqx@Eziu$^P>MDD@Z%9ufHhDgK z&*OzMi!8Y_>jMNB)A@b4g8`pl3Bd<1cq`K_-4C*T(=Mo+>_a!H2%WckhO#prkDE9d zD!-cBbbP?`s#StqnnfxPe$HC>S>&1FixcF? zgDVQ|p5;2S{hy)yW0n8bdu69Ku5Y@XIWD-PnI#w2sCPFikvSV1IrPg`AB(a%(0gf) z|59|c_Nk>KoA}o!`SU}mzF&@g{A(^oECTs-w%*)uMwC}v-1lj`QvB9JVbOvp!+Ddb zo+4+aDF2VeZrG4)ZNtTQghq69w6VV7V&=Ie-x5S5=1Urej-(^@f?wbhg>S1A!cU?d z!zWm^$W+tHhuc%*HFI+Ebewq95>{yPWx&gbjr8cw=VO&j6Up%ovLE%iE zYlQ0+*GSi^dtP%O#x3B_An4^4aMPnzI2YGO^A#Ep^zMH`@iozch9dXcVs{yWT29^w zqp8-4p31iblwvtRNt06U?~snnEwAW&Wq={O@j++<5AH_6T(wcIz<^^OnyF{}JWu$G z>3O5Aj6%q{K897i-Ip%j*jM9wbrnDK?)D^iu0cArvYn*+R(gPQ&&})#MHkDJCn3~F z+$l0v0f-_*Ps5-Gz)Ew|9#jfm-`W|sht$VkleK0QJru*5t*Kd$7Z1xQeX@9;-kat^ za$Oi|AKJD^)R%*B_fq!YDiCW&6jWk7lnY=3k6$_Ui-|KGdVQ1R2c%EL6(gGjHRh1a zJJYlDDZ81Q`NoSRRh__Q3d?;y&fJF!H>OdatlhKUxg@!|VX&KxNm{dSx>U87QrT`q zXcJL#lkZQUxVY8>nY)&&;BXuI2hun>iE&J8M5`l&0I{U(Ak0{ zp$e%LdA@YsSjw8!@U|dPB;`>CqM^_)gn;^51|af%(W3Bc#!Sy%eGf?o#|Okq1*JYr z-dlqzUqVS2>a1k?_0O@lya;JRdLMC@?*05UoXUSgI=e4>k#?$DM$e7Vduq{FPy^DI zIVYm=&>_qnfv^Y_dg+lLn?uwyDs+(yr59-c7He6T0{wq7$m5 zJ8+$hes<`$=1Xk+(j1~i3+_+xt$?86*VlMcdg}dUjmC${H#xtBAaw1;eF%7)OMMmI z3!Jx2%Ip>55Hub6!->1hGs#H9)IQQmSLvIhh)IgU{2v9iq*9GdOgs`jZr!+*d#kZv z^A?=J>}^Ylxc+Y*Q%P>=+bQfX0{f>XIsgP>CW1O;!4pOIWbWJ$)i7(7Okcc;cmVth z@=)Nxt2R5f;S}`+)lE!m*VD|)`DR2`a6DFAKTK;bm4lcJ-_-jZ?uV}u z7mwOzt8jO911R&3{~9S`VshgbwDbfOL=)yXz+4IE(RI@B>9p|vjo=IX^Si4BxvoY> z7n!5w70%pQ4Udja$>Lq7pm1(0r`Yxox@nRvX7D5c7nF4eyFo5~o@mAaHjBku1EM1# zsfVqfN1UrJ@n4-;LoZEOf-mkT+&N%npBh}xc>db2^`Gqlut!Q>vLH>KZNer$=HQsc z?$!+eK;670)Y*J1JaZv%2@#<@FNgsAbKo7HhucBJV<^2PY*npU%ny*%reW@qU5_)K zR;MjNBj;4R2mpk{FLDvrf3j@tw^#yM`A71M0Hj(`jwTC_DUW}LYaLJ8Hv({W#Q_)i z&v5^-?mwI1YU}@#qxJ@%yu%adsY9yBJqC)uxsCBvLVxdyI3B8b0~~nT8od=JCT|Nb zJTc*b$Eg=$KN$v(MfF|!ks&g^nr3WC4`odBz5ZQsqcwFciR3)JjQqgAS`S}4>w^~b z4rS2?-ST^AqQJpUrNqm}D@oi~Si2MW*&SB5W7B1QMU6NN&U~KJ@ zUw@|d3$(_of6i-aVL~fL+0gG;v4r2sOho2-<$x~XA z#0-WnA$w@NOZ`qxOw)o}EG${pFLR0;%1xSua=3G1g3*qSYg3z^bUF~%Vr#%E>u2b! z1uz#5>*BRRR$~3^GV;YZKd*0;fL9#UitBB@KJPd(L2wXWjU0S#xouDEOYsW2hcn&Cj`!O+UgXxgF6Y~pyq?B}18NmAJww*|H zFy#T`shqr1AX9bGpk0L5ND`?m-1GT-T^sCPYqFGo=yga+TNZ+}n^l%%Duirut!)v! zwEFGGm9go3&SShoeRKX1Bvg1i<^jW<66)Ulut?AHBs#e65m9%D3qlVyu7+QxY!@o- z#`<*&eHW%M1*H)L{S0jWdh6mPT`KQZ&mgvR6pn7gU+9UPeC?7{Eh8faLDI_Ga2IPO zcLD$ivb9U3EEc1VJ(*<&d&E6CZQrj>A;Jb_0PY#wp=7LRuCneY z_;3DT<*)t#Fvsr{F>{FtawuZ_5=ERGh%-0_V@`HdMHrcwNI(CsN=?d8=Z{V$B!_>I z5$0%GO6H0u&a4Lj3>n_P_d5Wq2Y_vHYm?S5E^QxxVuO=^0>zdQTFP6F|739uCE3ki z2s^lhZbX&3Li#((v@4DDKLY)>%D%U?l;AnmSSm8g+3QWV<6b4V-_Trhg z*;`B0p}Dk@US(Br#dzri0(9}WNAb^~2!{zW!)JJ?oWuPq9}AtSOQ^L@4{p|52i(%b zLw627c?*DxSAV%ZESy%f3{dE!d45faHv9r9Uthx+_U30*9!wFxsZ{-xXv0ZHVo^j*U2%z@(io*$!XSaKXJC>E~<3KKI(n zx3DYS#jlY4>Xjkui3U4G+`-Y~zHd@@GZ%#0xn2%#0T0+AR*(~Orl@PJ zlqI}zJ)D)nda0eNp@M(FH5z;5LWxKrPfP2*{_0xSVVjmU{(hJoX4GpHSua zKs_z8BHSAxM^!NR68q$va8#TvvN@eLcVXmHsiU*Eh?kZ`GMkC0+jI&)*8a(whgtd1 zMQ#tcm}NE#X*j;RU;EVI?fu9igIMMJiR}{>DOP2q)jfqtLYaPt_1nFCRZ21V?Q#8% zGwuu~^`%fmuK}453}Sjx-I(rH2MNh$n|XIz_M~Xz3Bn^P_38oUx&Zb)TH;W0h>UI^ zEtJ401d-j(tJzAiUeSrw4f|S=lcQIT(rmm8Q!dOnH1o52ZC4;j+q%e9!zZi-N+BP0 zALRk{BcVq$D&AsChjh@lGCgOM$RW{=m%>*MB9r{;7Fc+W<)`x3eB~qvbr}J&}bhr_-HpY}K$kDGU|@p{NQo z`rN*c(6OuU>ZamW-_i@6f-UmYepU~KbUQ=uv=ZKreah-HZ?tZz+SNQuYC1%#?};RHq57_4%7MjzJ@COdEUu z{&u&V<}SP328^1%B|<(w9D#4q?F(etGK+%UZEv1Md{Skd4*9}9>)GSEXXio_qXPoVVdB!uj1BiYr&Ynb%-0&`Z^+;6Xjw6IFw>gbAOW|mCE-!gdZr85@Z7wA> zsqd0iT!kpC{Ut}MOG!-#=D^B{%RdNrKS)p105&+4?;S6@_V0G9)L*FF@Ko*19Jf+u{(C0M~5Vw3Yfm+P> z4i*4%TTmlQGj45i|9p7TwkhG28o?g#(j*lW>Sl|qDL--W=r-Fyoel8mNRheJWN%K4 z!Ublyczg;_+LMB7@E?KjC-q)ZGmM7=L5KVZ;Z;Gik1W6cD*rvr6A;Z;UzOF_1wnX> z!AYgV(xyCzu?O3=OHf5M=H_-pP~Xk zMV5qLpt!(MdL79rEJnTKgJr&DGgq;*H|gTU$gH{xo@^UBC|oAu9UGahj9cHVgD zbLGF(R7GdxP%3Hv)HQpV>dAhs+n}cya!sW9uLFv4)K{6$CVW!0)vJuaUg7uEWZ{!)O zvh-5iEYJM&KbZ#KzQwi%>y(Z!e;8(Bt+B+lJ7aQPWnhg!e{-g-X5ZJXFLKCx@yQma z(11ny39Ae8d&Vj)89010%>44YzD;&F8cO|G6*)w8-hREGm6kc1;6}{Pc&YB; zE+1n}3Yh<3G5ad2Cou+>~!2wdx27%88mbOEEGK%<=Fn1ru#3p zZN>O}-ncXt&Y@klcVgrw2hJL491i(lu{?mY11pj_tqUi}zB;jd4s5mGWQma5cL|m}CFziKZv-JsS^<@t>e4Q_Xf(uKy1~OMN zN3U~nLM_ePzK2?t`TegEm@yA729P`|fAPlXM_i0_X73iKZwy3b1aQ&PLsfF@2SFr^ zp~I3ZpKP(zcLc#@p(XZ#pXCIcWUHoJlQev#MG7*o^Rz*Bhj)m;We`ZOOD%1VAtETJ zmhO!u-O?A_OO;FN#h?%Y^=S69se!GMIV|FPKpVuluV++UB>xjw;<9km* z7z(sySI<9J@-Xal&A7Ld<7G~0d*hyepHKH+2mAjyZ6D(b3=YgI3(OnpI$PxF=bL3n z^s#dAD8ctTc%ZuR`Wdk~ZiYhL8KEaq!Vm8f?Qk~(#N*|H2@zd1y_5P&@gWP!ZB&7cxQ!=X3Kq-hu7J5$ zRoCe|BOK;KK?d8t;4WK@31%RZXn%AM?z!*G@z}+$Q_l%OpB<3&)uNu;bx!7o*w6K| z%b&(!is?p(jE34g`Ul;T67T*T61^?7NqVJ7&fYPh0#c6Yjm(~h;_zEri+F7im$pg1 z4;h%`y`%oXE?+06C?eDV;V^P$OxltYa9?j(9v9j;E!|sd*V$j%pmsly^~!Llt+wkm z&a1<;Oht{q?d2f6iV>v;YMb8@EO5}-?Ba)`$%3b%Wmiil7vS@c$r4dg__wzPNuY;#W2+w(t zr_xp!^Qf#9c~038B5U~`%e&6?-3$UwuP)H9@CKpjiQb`LSz;1Gh8$U`<4iA-%`S$h zU#=#Au)ZFPN0jIfww2}Mf#5I#utKLIi;@})6br?ulBY<%j6E> z=ClPx`8q#TI|e`7_g)f>#E*z8xV}Hk)n2qwFEM6vVd`Foenm_cCP;H=Lm6DwF-Yua zEJ38jh3gbw22IDFq7vkFRSf*;v*xaqS9b26kxujNsOC_e(ZGx%`Qla=nVe*0TuD%zeO&n&YEgS} zu4rIE?1*R4(i`2?JO_`2Wzp$Q+KF?k| z%FXO2FFH>2L2K-Wy1Vnt{BDF~kd1ompm3V^J)gxCv^x(8Z8RYvW~Q= zx|#pcxXy&n=Ebapo!&U4_iSVx1P?qV3tzoC&Gf>2XAWscsvvN4IO+R185{b+mmiT1 zI(*9o!<$Ti-Y)lt3?h)vke$C!IXiR0Qj!|ne{=9sl-FAC5E>G&jGOTy@#676#jkJY zqic>cKlU8ryJv3~+G}oXSZuYkw2rrQw7yx`l7}!hR~6 zqo;+0FDNZZWSuo~$jl&0SAM8K1h~vj)~~MTC}*8|ee{QefZu%hz0fwy`iAAi206K) zASrC~;)#3St2peb?eMiL9Cp+7hpf=$6f?&FbnoJ4mk^5^))&Tde7!!c34D>I>@X&# zNBSbBW2q7&qM_5@P#wY}azB*vBtE^sPgQ^55UNwh6!k?1s@DO+lK3;5ry0YNlxdke-Hp^d{@>e5v2nJraW+$!ZpO+k&uv<=!M{A1c*7O`O%DLj}}6jp{lm$jZOy&K`8-v=%}Z=yCwB#6=N7{x zsLR$N4=fbePSB-quj5a#L2ArxRB(Ree5Gd8>v2F$$qek2#t#DwLcPuB4Dbd|Bgf!> zvUB2RAr`TE>-7#Ny0_lrO4GgxVoB1uS1o#ohcwM7{VF5N&byAB@TiJBl()+`jz;hj7 z3Gu`C82C$b*UyHb>jmQN%@BJfo!LF;*!i$_>PxUkxtYB=my9qQie{fn~{w|;?D zz3f^`Hf6y*^S%qlu<1Oh%G7W)KcM#p)|1lH_6t{=q;#}MP3weZh~YzDDT_A6b@pa^ z8~T31V%cvg;b623M$~{^J}LT&Ucs89q-N`htOfT})M-nvUx%nNDw->M6rlm;kzTAz z{P}=hYPsKp>gZ~?)gNZ9q=GZy%=mdx+PPOndk|hteu4$#0e>)|K+1XgLl~zm=BV1a zzR`kgtuOyF-_?@vGm}x%OUpKvhWQYjT9e-QKzXw91?P0t?;*$W(0(!xL$iC`_fOR& zp@{ORxsH)gB(dbvjld9+n*X1-DhFRgk*oM$`E!WQ_&E`0CDt*s4uzcf3#D%PE=${k z0}nW^B7V8}Tz$}0oL3#3l*E6@ocVH7IVK-QyT6sK1|ZPaZ!!ad$( zPrAp+rPdgTkehRzdPD2~`n${-4Wosx2ckhJ+eS%Gg~JtfalB@h<$Q^xl(0e`&Jz%j z{|MSE?@F@-{+a!rP10IjGAJRMs5QWXRrW|u0kQM+v{vVm}{6qeB z{QnLgY&`fvO|!Xkn{w{{o9r+i=!Q!e+UinUZI}_JVvA<#k-{-SVP=@_i)#|(rAK2; zt5z9*geLALY~7LJ4WVzVXyV3)=xKg;_)hNgKaFs31iHAk)n=gr#-qFhmdETUBTdAbqY$#$j_-BSFi+;IdfALSE+PdNq^lB#48tnNcgbp7 zJ6BzKM1=9Q7Wy~0Ai?voxVEQ#PK!PI$+AS64i}W0qKK=Au`WN_F68>_Te7GszE|Bw zsKB^v`~~%b5d+GO2ESIkU)NvpwfSDHvZ{&_!=b_<*__)R-s4%M?nTpU`RNdJ$^>=I z1!a^F`GVD%w`O0{qw?m7pF(6w``J~r{9puEFB$bYs27@;Y<2wL=#OGodTnf-6o|k0 zdCG<5u&^UpI{)l?7=88-g7zUVSbt#%uYYP&7gp%0F^L;W;b-X;%*Wy%vD!DUt-#Y@ zCEF#(7?&s19yFCPD7uF#28OYvPcQ_75d~Ejuj*2g*P}J?CQ=@V^zAx#cCTtcPw$3P zy92sDb$jDDcER-OFFf4A1=;L4hL&0EC{?@o@_b-yMqed^^tMwg^0h9YZ+1db) za({*&7ZM7tPS2KhDI%hQ1wQsMMqlLksX^##1!5WmnO0f)V0c$=sj_fM;_E_te@R2<+&@0QtLO1K|ZPJHt7 zugRRR(o1jOQOde6^8Dj4`46-BnXbB#>c7Nh^I~ z+nK{eRJW@q26T~IFnLy(=0d476z@qcig5P8hoydsyjhI4>DYYMP6)>fa{3&m)Jsma za@9TWWk+#CxWrr)oZ?|!1Qa5$bHtGgn7q%7MVW!1C-6v+1-_|1-PDD#3OoTk_(=#l zH>@Zt4?ddT2-5U^_wYhd8@Dh+Sg@Qb?Ee;5Yq%)+XG!6+ErzUWtB_9dweadWV#fCH ziGD*X7;UEGdNOKO^2gNh*}VSnLq#?5AGsLba-o^C`KWJ(l|1`ROeRmf9J=kflpvly z+lbn3Ko`hha-Nz@rJ%k(Be(-TrHyk!u@`^xX5$y%>uvlo=V0OMGj&N+*i`>7c}n$i z26X=XYgknp{sV|VUC_%qxRfb5s_gX`CgWT`gR!Ue#zt$?y`1d@_Vbmd-2sbCm z{N7fOAOv_B=69LoKggS%?VQ^Te|70LbGqDEl-5Z5xokLC;_Qt=S2_637s)6(|Aw+w z9f`YcdUr`JKJ_$}@mWBq3ViED2ryzjEaR$qy4x|lBuHhtY3>y?+GR01x7%SF7Nd&= z*-Rb|7i)GA0(TO!2jWS#tyBB=p-&IROQi>wBm^6XB*O@qvFaeFNh-PL>u-Grgn?0a zmJMHZODDUgTh=HMik=R|fXt>kB`p}uLzxz~K`l6azl^gYjlWZiuq?oJRa5u=9HbX9 z8gyBQUJp>*Mb#JwLQK1Bx^g8JwAd&IMVCrc9hv$phyWwGb~w)$f+4SMKVBS5jj z9X9keKhQ~sTOfB50`ECAD0I*=_uM53=6iz?2niN!B8ncYA+FzzU(@)^63jor-F7&{ z>D6W$Y=E9O6yvJH^`tb5NUr|sp|?@Q+wFt2rAD>^Fz1mMXKzmgf4tX7yV6m*Y=(%@ z6sY011`eZjWVh8dIQL1od@Hp-|2MPys-@u}d~Zl_v{jkrkzHS`a#3I1E+IJm>wNpv z{+BnP7W-q^;>7O1oW>Z>VQ=Ho$j^&XW?p|az<5AnmPt=9s>*Wf)v&L3Hf20~KQ~<2 zM%`VRX5{CwBm0b-6K2^;XBvB$jar<+z$^>Sb%0GHC{|F7%G(l7MO+`WO!urdC|36% zDDTe=&mJHj*2SjBM@6^#Udr5)nV)mz~!SlcwrmlMdx>M~I$KYFbR$ozT%#FoH4nl2~;hV+2w^#sv#}Tw7CmWHLMj%ZXU^vJL1M zR=y{jE{AN^yQbaKr?bG0qgHFWz5pZ$!=g93Pel^O7F0X}Wh?I>^J9AFKo|?exF+s; zuTS-E)b7j5?*b>NjHjmVv0tN1r-$00-KeO?#boTciCKm9i%PMSy%I--`-caDz-$pt zBjr^^X^~CM`yCqeX-&Y6oqLFPCjg5}`69a6cL&%zpjv6Y-k%u-aL2MMXFO1UyACki z+r-+Zf4^30xL?CuTiGMd$)vo0S6>302-0zqjqATV>AdSS)yfC{Bc0HH$j}s75N7c; z-rr+ge(NXeA*FY}dFQ%y<_r!mnKS#V$3?$g2}S&!JYv0HMSr)?=v@!Z7oGlODCuYZsbUoK=9-|vck}w3$D~KN_T!Q zH!z&482?+)ij#mGQym;2C<-25q7(n{KR*0jgzD3_yVgjZL(>T$-5)aBZ(;Ic IAN=zF0`;07uK)l5 literal 0 HcmV?d00001 diff --git a/zh-cn/application-dev/ui/ui-ts-layout-flex.md b/zh-cn/application-dev/ui/ui-ts-layout-flex.md index 3119d2392a..92783b661f 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-flex.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-flex.md @@ -1,408 +1,340 @@ # 弹性布局 -弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列、对齐和分配空白空间。 -开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局。 +弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列、对齐和分配空白空间。弹性布局 -- 容器 -- 子组件 -- 主轴 -- 交叉轴 -## 创建弹性布局 +- 容器: [Flex组件](../reference/arkui-ts/ts-container-flex.md)作为Flex布局的容器，用于设置布局相关属性。 +- 子组件: Flex组件内的子组件自动成为布局的子组件。 +- 主轴: 水平方向的轴线，子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端，结束位置称为主轴终点端。 +- 交叉轴: 垂直方向的轴线。交叉始的位置称为主轴首部，结束位置称为交叉轴尾部。 - `Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })` + ![](figures/flex.png) -通过参数direction定义弹性布局的布局方向，justifyContent定义子组件在弹性布局方向上的对齐方式， alignContent定义子组件在与布局方向垂直的方向上的对齐方式，wrap定义内容超过一行时是否换行。 +## 容器组件属性 -## 弹性布局方向 +通过Flex组件提供的Flex接口创建弹性布局。如下： -弹性布局的方向分为水平方向和垂直方向。子组件排列的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有： +`Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })` -* FlexDirection. Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。 - - -```ts - Flex({ direction: FlexDirection.Row }) { - Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) - Text('2').width('33%').height(50).backgroundColor(0xD2B48C) - Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) - } - .height(70) - .width('90%') - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - -![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.png) +### 弹性布局方向 +参数direction决定主轴的方向，即子组件的排列方向。可选值有： -* FlexDirection. RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。 +![](figures/direction.png) - +- FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。 -```ts - Flex({ direction: FlexDirection.RowReverse }) { + ```ts + Flex({ direction: FlexDirection.Row }) { Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) Text('2').width('33%').height(50).backgroundColor(0xD2B48C) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) - } - .height(70) - .width('90%') - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.png) + } + .height(70) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + ![zh-cn_image_0000001218579606](figures/zh-cn_image_0000001218579606.png) + +- FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着FlexDirection. Row相反的方向开始排布。 + + ```ts + Flex({ direction: FlexDirection.RowReverse }) { + Text('1').width('33%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('33%').height(50).backgroundColor(0xD2B48C) + Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) + } + .height(70) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + ``` -* FlexDirection. Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。 + ![zh-cn_image_0000001218739566](figures/zh-cn_image_0000001218739566.png) - +- FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。 -```ts - Flex({ direction: FlexDirection.Column }) { + ```ts + Flex({ direction: FlexDirection.Column }) { Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('2').width('100%').height(50).backgroundColor(0xD2B48C) Text('3').width('100%').height(50).backgroundColor(0xF5DEB3) - } - .height(70) - .width('90%') - .padding(10) - .backgroundColor(0xAFEEEE) - ``` + } + .height(70) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + ``` - - -![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.png) + ![zh-cn_image_0000001263019457](figures/zh-cn_image_0000001263019457.png) -* FlexDirection. ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。 +- FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着FlexDirection. Column相反的方向开始排布。 - - -```ts - Flex({ direction: FlexDirection.ColumnReverse }) { + ```ts + Flex({ direction: FlexDirection.ColumnReverse }) { Text('1').width('100%').height(50).backgroundColor(0xF5DEB3) Text('2').width('100%').height(50).backgroundColor(0xD2B48C) Text('3').width('100%').height(50).backgroundColor(0xF5DEB3) - } - .height(70) - .width('90%') - .padding(10) - .backgroundColor(0xAFEEEE) - ``` + } + .height(70) + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + ``` - - -![zh-cn_image_0000001263339459](figures/zh-cn_image_0000001263339459.png) - -## 弹性布局换行 + ![zh-cn_image_0000001263339459](figures/zh-cn_image_0000001263339459.png) -默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置其他换行方式，可选值有： +### 弹性布局换行 -* FlexWrap. NoWrap（默认值）: 不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。 +默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置子组件换行方式。可选值有： - +- FlexWrap. NoWrap（默认值）: 不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。 -```ts - Flex({ wrap: FlexWrap.NoWrap }) { + ```ts + Flex({ wrap: FlexWrap.NoWrap }) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) - } - .width('90%') - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png) - -* FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。 - - - -```ts - Flex({ wrap: FlexWrap.Wrap }) { + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png) + +- FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。 + + ```ts + Flex({ wrap: FlexWrap.Wrap }) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('3').width('50%').height(50).backgroundColor(0xD2B48C) - } - .width('90%') - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png) - -* FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。 - - - -```ts - Flex({ wrap: FlexWrap.WrapReverse}) { + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png) + +- FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。 + + ```ts + Flex({ wrap: FlexWrap.WrapReverse}) { Text('1').width('50%').height(50).backgroundColor(0xF5DEB3) Text('2').width('50%').height(50).backgroundColor(0xD2B48C) Text('3').width('50%').height(50).backgroundColor(0xF5DEB3) - } - .width('90%') - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001263259399](figures/zh-cn_image_0000001263259399.png) + } + .width('90%') + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001263259399](figures/zh-cn_image_0000001263259399.png) -## 弹性布局对齐方式 +### 弹性布局对齐方式 -### 主轴对齐 +#### 主轴对齐 -可以通过justifyContent参数设置在主轴的对齐方式，可选值有： +通过justifyContent参数设置在主轴方向的对齐方式，存在下面六种情况： -* FlexAlign. Start（默认值）: 子组件在主轴方向首端对齐, 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐。 +![](figures/justifyContent.png) - +- FlexAlign.Start（默认值）: 子组件在主轴方向起始端对齐, 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐。 -```ts - Flex({ justifyContent: FlexAlign.Start }) { - Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + ```ts + Flex({ justifyContent: FlexAlign.Start }) { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) - } - .width('90%') - .padding({ top: 10, bottom: 10 }) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001218259634](figures/mainStart.png) - -* FlexAlign. Center: 子组件在主轴方向居中对齐。 - - - -```ts - Flex({ justifyContent: FlexAlign.Center }) { + } + .width('90%') + .padding({ top: 10, bottom: 10 }) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001218259634](figures/mainStart.png) + +- FlexAlign.Center: 子组件在主轴方向居中对齐。 + + ```ts + Flex({ justifyContent: FlexAlign.Center }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) - } - .width('90%') - .padding({ top: 10, bottom: 10 }) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001218579608](figures/mainCenter.png) - -* FlexAlign. End: 子组件在主轴方向尾部对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐。 - - - -```ts - Flex({ justifyContent: FlexAlign.End }) { + } + .width('90%') + .padding({ top: 10, bottom: 10 }) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001218579608](figures/mainCenter.png) + +- FlexAlign.End: 子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐。 + + ```ts + Flex({ justifyContent: FlexAlign.End }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) - } - .width('90%') - .padding({ top: 10, bottom: 10 }) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001218739568](figures/mainEnd.png) - -* FlexAlign. SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。 - - - -```ts - Flex({ justifyContent: FlexAlign.SpaceBetween }) { + } + .width('90%') + .padding({ top: 10, bottom: 10 }) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001218739568](figures/mainEnd.png) + +- FlexAlign.SpaceBetween: Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。 + + ```ts + Flex({ justifyContent: FlexAlign.SpaceBetween }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) - } - .width('90%') - .padding({ top: 10, bottom: 10 }) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001263019461](figures/mainSpacebetween.png) - -* FlexAlign. SpaceAround: Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。 第一个子组件到行首的距离和最后一个子组件到行尾的距离是相邻元素之间距离的一半。 - - - -```ts - Flex({ justifyContent: FlexAlign.SpaceAround }) { + } + .width('90%') + .padding({ top: 10, bottom: 10 }) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001263019461](figures/mainSpacebetween.png) + +- FlexAlign.SpaceAround: Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。 + + ```ts + Flex({ justifyContent: FlexAlign.SpaceAround }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) - } - .width('90%') - .padding({ top: 10, bottom: 10 }) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001263339461](figures/mainSpacearound.png) - -* FlexAlign. SpaceEvenly: Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与行首的间距、最后一个子组件到行尾的间距均相等。 - - - -```ts - Flex({ justifyContent: FlexAlign.SpaceEvenly }) { + } + .width('90%') + .padding({ top: 10, bottom: 10 }) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001263339461](figures/mainSpacearound.png) + +- FlexAlign.SpaceEvenly: Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。 + + ```ts + Flex({ justifyContent: FlexAlign.SpaceEvenly }) { Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) Text('2').width('20%').height(50).backgroundColor(0xD2B48C) Text('3').width('20%').height(50).backgroundColor(0xF5DEB3) - } - .width('90%') - .padding({ top: 10, bottom: 10 }) - .backgroundColor(0xAFEEEE) - ``` + } + .width('90%') + .padding({ top: 10, bottom: 10 }) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001263139411](figures/mainSpaceevenly.png) - - -![zh-cn_image_0000001263139411](figures/mainSpaceevenly.png) - -### 交叉轴对齐 +#### 交叉轴对齐 -#### 容器组件设置交叉轴对齐 -可以通过flex组件的alignItems参数设置子组件在交叉轴的对齐方式，可选值有： +容器和子组件都可以设置交叉轴对齐方式，且子组件设置的对齐方式优先级较高。 -* ItemAlign. Auto: 使用Flex容器中默认配置。 +##### 容器组件设置交叉轴对齐 +可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式，可选值有： - +- ItemAlign.Auto: 使用Flex容器中默认配置。 -```ts - Flex({ alignItems: ItemAlign.Auto }) { + ```ts + Flex({ alignItems: ItemAlign.Auto }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) - } - .size({width: '90%', height: 80}) - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001218419616](figures/zh-cn_image_0000001218419616.png) + } + .size({width: '90%', height: 80}) + .padding(10) + .backgroundColor(0xAFEEEE) + ``` -* ItemAlign. Start: 交叉轴方向首部对齐。 + ![zh-cn_image_0000001218419616](figures/zh-cn_image_0000001218419616.png) - +- ItemAlign.Start: 交叉轴方向首部对齐。 -```ts - Flex({ alignItems: ItemAlign.Start }) { + ```ts + Flex({ alignItems: ItemAlign.Start }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) - } - .size({width: '90%', height: 80}) - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001263259401](figures/zh-cn_image_0000001263259401.png) - -* ItemAlign. Center: 交叉轴方向居中对齐。 - - - -```ts - Flex({ alignItems: ItemAlign.Center }) { + } + .size({width: '90%', height: 80}) + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001263259401](figures/zh-cn_image_0000001263259401.png) + +- ItemAlign.Center: 交叉轴方向居中对齐。 + + ```ts + Flex({ alignItems: ItemAlign.Center }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) - } - .size({width: '90%', height: 80}) - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001218259636](figures/zh-cn_image_0000001218259636.png) - -* ItemAlign. End：交叉轴方向底部对齐。 - - - -```ts - Flex({ alignItems: ItemAlign.End }) { + } + .size({width: '90%', height: 80}) + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001218259636](figures/zh-cn_image_0000001218259636.png) + +- ItemAlign.End：交叉轴方向底部对齐。 + + ```ts + Flex({ alignItems: ItemAlign.End }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) - } - .size({width: '90%', height: 80}) - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - + } + .size({width: '90%', height: 80}) + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + ![zh-cn_image_0000001218579610](figures/zh-cn_image_0000001218579610.png) -![zh-cn_image_0000001218579610](figures/zh-cn_image_0000001218579610.png) - -* ItemAlign. Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 +- ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 - - -```ts - Flex({ alignItems: ItemAlign.Stretch }) { + ```ts + Flex({ alignItems: ItemAlign.Stretch }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) - } - .size({width: '90%', height: 80}) - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001218739570](figures/zh-cn_image_0000001218739570.png) - -* ItemAlign. Baseline：交叉轴方向文本基线对齐。 - - - -```ts - Flex({ alignItems: ItemAlign.Baseline }) { + } + .size({width: '90%', height: 80}) + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001218739570](figures/zh-cn_image_0000001218739570.png) + +- ItemAlign. Baseline：交叉轴方向文本基线对齐。 + + ```ts + Flex({ alignItems: ItemAlign.Baseline }) { Text('1').width('33%').height(30).backgroundColor(0xF5DEB3) Text('2').width('33%').height(40).backgroundColor(0xD2B48C) Text('3').width('33%').height(50).backgroundColor(0xF5DEB3) - } - .size({width: '90%', height: 80}) - .padding(10) - .backgroundColor(0xAFEEEE) - ``` - - - -![zh-cn_image_0000001263019463](figures/zh-cn_image_0000001263019463.png) - -#### 子组件设置交叉轴对齐 - + } + .size({width: '90%', height: 80}) + .padding(10) + .backgroundColor(0xAFEEEE) + ``` + + ![zh-cn_image_0000001263019463](figures/zh-cn_image_0000001263019463.png) + +##### 子组件设置交叉轴对齐 子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems默认配置。如下例所示： ```ts -Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { +Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { //容器组件设置子组件居中 Text('alignSelf Start').width('25%').height(80) .alignSelf(ItemAlign.Start) .backgroundColor(0xF5DEB3) @@ -426,141 +358,113 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { 上例中，Flex容器中alignItems设置交叉轴子组件的对齐方式为居中，子组件自身设置了alignSelf属性的情况，覆盖父组件的alignItem值，表现为alignSelf的定义。 -### 内容对齐 +#### 内容对齐 可以通过alignContent参数设置子组件各行在交叉轴剩余空间内的对齐方式，只在多行的flex布局中生效，可选值有： -* FlexAlign. Start: 子组件各行与交叉轴起点对齐。 - - - -``` +- FlexAlign.Start: 子组件各行与交叉轴起点对齐。 - Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) { + ``` + Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) { Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('5').width('20%').height(20).backgroundColor(0xD2B48C) - } - .width('90%') - .height(100) - .backgroundColor(0xAFEEEE) - ``` - - - - -![crossStart.png](figures/crossStart.png) - -* FlexAlign. Center: 子组件各行在交叉轴方向居中对齐。 + } + .width('90%') + .height(100) + .backgroundColor(0xAFEEEE) + ``` + + ![crossStart.png](figures/crossStart.png) - +- FlexAlign.Center: 子组件各行在交叉轴方向居中对齐。 -```ts - Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) { + ```ts + Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) { Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('5').width('20%').height(20).backgroundColor(0xD2B48C) - } - .width('90%') - .height(100) - .backgroundColor(0xAFEEEE) - ``` - - - -![crossCenter.png](figures/crossCenter.png) - -* FlexAlign. End: 子组件各行与交叉轴终点对齐。 + } + .width('90%') + .height(100) + .backgroundColor(0xAFEEEE) + ``` + + ![crossCenter.png](figures/crossCenter.png) - +- FlexAlign.End: 子组件各行与交叉轴终点对齐。 -```ts - Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) { + ```ts + Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) { Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('5').width('20%').height(20).backgroundColor(0xD2B48C) - } - .width('90%') - .height(100) - .backgroundColor(0xAFEEEE) - ``` - - - -![crossEnd.png](figures/crossEnd.png) + } + .width('90%') + .height(100) + .backgroundColor(0xAFEEEE) + ``` + + ![crossEnd.png](figures/crossEnd.png) -* FlexAlign. SpaceBetween: 子组件各行与交叉轴两端对齐，各行间垂直间距平均分布。 +- FlexAlign.SpaceBetween: 子组件各行与交叉轴两端对齐，各行间垂直间距平均分布。 - - -```ts - Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) { + ```ts + Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) { Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('5').width('20%').height(20).backgroundColor(0xD2B48C) - } - .width('90%') - .height(100) - .backgroundColor(0xAFEEEE) - ``` - - - -![crossSpacebetween.png](figures/crossSpacebetween.png) - -* FlexAlign. SpaceAround: 子组件各行间距相等，是元素首尾行与交叉轴两端距离的两倍。 + } + .width('90%') + .height(100) + .backgroundColor(0xAFEEEE) + ``` + + ![crossSpacebetween.png](figures/crossSpacebetween.png) - +- FlexAlign.SpaceAround: 子组件各行间距相等，是元素首尾行与交叉轴两端距离的两倍。 -```ts - Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) { + ```ts + Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) { Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('5').width('20%').height(20).backgroundColor(0xD2B48C) - } - .width('90%') - .height(100) - .backgroundColor(0xAFEEEE) - ``` - - - - -![crossSpacearound.png](figures/crossSpacearound.png) - -* FlexAlign. SpaceEvenly: 子组件各行间距，子组件首尾行与交叉轴两端距离都相等。 + } + .width('90%') + .height(100) + .backgroundColor(0xAFEEEE) + ``` + + ![crossSpacearound.png](figures/crossSpacearound.png) - +- FlexAlign.SpaceEvenly: 子组件各行间距，子组件首尾行与交叉轴两端距离都相等。 -```ts - Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) { + ```ts + Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) { Text('1').width('30%').height(20).backgroundColor(0xF5DEB3) Text('2').width('60%').height(20).backgroundColor(0xD2B48C) Text('3').width('40%').height(20).backgroundColor(0xD2B48C) Text('4').width('30%').height(20).backgroundColor(0xF5DEB3) Text('5').width('20%').height(20).backgroundColor(0xD2B48C) - } - .width('90%') - .height(100) - .backgroundColor(0xAFEEEE) - ``` - - - - -![crossSpaceevenly.png](figures/crossSpaceevenly.png) + } + .width('90%') + .height(100) + .backgroundColor(0xAFEEEE) + ``` + + ![crossSpaceevenly.png](figures/crossSpaceevenly.png) -## 弹性布局的自适应拉伸 +### 弹性布局的自适应拉伸 在弹性布局父组件尺寸不够大的时候，通过子组件的下面几个属性设置其再父容器的占比，达到自适应布局能力。 1. flexBasis: 设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置或者为auto，那子项的空间为width/height的值。 diff --git a/zh-cn/application-dev/ui/ui-ts-layout-linear.md b/zh-cn/application-dev/ui/ui-ts-layout-linear.md index ec8132c0e3..0e89b56ad7 100644 --- a/zh-cn/application-dev/ui/ui-ts-layout-linear.md +++ b/zh-cn/application-dev/ui/ui-ts-layout-linear.md @@ -46,96 +46,94 @@ struct BlankExample { 自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现： 1. 父容器尺寸确定时，设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。 - - ```ts - @Entry - @Component - struct layoutWeightExample { - build() { - Column() { - Text('1:2:3').width('100%') - Row() { - Column() { - Text('layoutWeight(1)') - .textAlign(TextAlign.Center) - }.layoutWeight(2).backgroundColor(0xffd306).height('100%') - - Column() { - Text('layoutWeight(2)') - .textAlign(TextAlign.Center) - }.layoutWeight(4).backgroundColor(0xffed97).height('100%') - - Column() { - Text('layoutWeight(6)') - .textAlign(TextAlign.Center) - }.layoutWeight(6).backgroundColor(0xffd306).height('100%') - - }.backgroundColor(0xffd306).height('30%') - - Text('2:5:3').width('100%') - Row() { - Column() { - Text('layoutWeight(2)') - .textAlign(TextAlign.Center) - }.layoutWeight(2).backgroundColor(0xffd306).height('100%') - - Column() { - Text('layoutWeight(5)') - .textAlign(TextAlign.Center) - }.layoutWeight(5).backgroundColor(0xffed97).height('100%') - - Column() { - Text('layoutWeight(3)') - .textAlign(TextAlign.Center) - }.layoutWeight(3).backgroundColor(0xffd306).height('100%') - }.backgroundColor(0xffd306).height('30%') + ```ts + @Entry + @Component + struct layoutWeightExample { + build() { + Column() { + Text('1:2:3').width('100%') + Row() { + Column() { + Text('layoutWeight(1)') + .textAlign(TextAlign.Center) + }.layoutWeight(2).backgroundColor(0xffd306).height('100%') + + Column() { + Text('layoutWeight(2)') + .textAlign(TextAlign.Center) + }.layoutWeight(4).backgroundColor(0xffed97).height('100%') + + Column() { + Text('layoutWeight(6)') + .textAlign(TextAlign.Center) + }.layoutWeight(6).backgroundColor(0xffd306).height('100%') + + }.backgroundColor(0xffd306).height('30%') + + Text('2:5:3').width('100%') + Row() { + Column() { + Text('layoutWeight(2)') + .textAlign(TextAlign.Center) + }.layoutWeight(2).backgroundColor(0xffd306).height('100%') + + Column() { + Text('layoutWeight(5)') + .textAlign(TextAlign.Center) + }.layoutWeight(5).backgroundColor(0xffed97).height('100%') + + Column() { + Text('layoutWeight(3)') + .textAlign(TextAlign.Center) + }.layoutWeight(3).backgroundColor(0xffd306).height('100%') + }.backgroundColor(0xffd306).height('30%') + } } } - } - ``` + ``` - ![](figures/layoutWeight.gif) + ![](figures/layoutWeight.gif) -2. 父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。 - - ```ts - @Entry - @Component - struct WidthExample { - build() { - Column() { - Row() { - Column() { - Text('left width 20%') - .textAlign(TextAlign.Center) - }.width('20%').backgroundColor(0xffd306).height('100%') - - Column() { - Text('center width 50%') - .textAlign(TextAlign.Center) - }.width('50%').backgroundColor(0xffed97).height('100%') - - Column() { - Text('right width 30%') - .textAlign(TextAlign.Center) - }.width('30%').backgroundColor(0xffd306).height('100%') - }.backgroundColor(0xffd306).height('30%') +3. 父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。 + + ```ts + @Entry + @Component + struct WidthExample { + build() { + Column() { + Row() { + Column() { + Text('left width 20%') + .textAlign(TextAlign.Center) + }.width('20%').backgroundColor(0xffd306).height('100%') + + Column() { + Text('center width 50%') + .textAlign(TextAlign.Center) + }.width('50%').backgroundColor(0xffed97).height('100%') + + Column() { + Text('right width 30%') + .textAlign(TextAlign.Center) + }.width('30%').backgroundColor(0xffd306).height('100%') + }.backgroundColor(0xffd306).height('30%') + } } } - } - ``` + ``` - ![](figures/width.gif) + ![](figures/width.gif) -上例中，在任意大小的设备中，子组件的宽度占比固定。 + 上例中，在任意大小的设备中，子组件的宽度占比固定。 ## 定位能力 -* 相对定位 +- 相对定位 使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。 - ```ts @Entry @@ -171,10 +169,10 @@ struct BlankExample { ![](figures/offset.gif) -* 绝对定位 + +- 绝对定位 线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局（AbsoluteLayout），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。 - ```ts @Entry @@ -219,86 +217,90 @@ struct BlankExample { 自适应延伸是在不同尺寸设备下，当页面显示内容个数不一并延伸到屏幕外时，可通过滚动条拖动展示。适用于线性布局中内容无法一屏展示的场景。常见以下两类实现方法。 -* List组件 +- List组件 List子项过多一屏放不下时，未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到极限的回弹效果。 - -```ts - @Entry - @Component - struct ListExample1 { - @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"] - @State alignListItem: ListItemAlign = ListItemAlign.Start - - build() { - Column() { - List({ space: 20, initialIndex: 0 }) { - ForEach(this.arr, (item) => { - ListItem() { - Text('' + item) - .width('100%') - .height(100) - .fontSize(16) - .textAlign(TextAlign.Center) - .borderRadius(10) - .backgroundColor(0xFFFFFF) - } - .border({ width: 2, color: Color.Green }) - }, item => item) - } - .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed }) - .scrollBar(BarState.On) // 滚动条常驻 - .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果 - - }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) + + 纵向List： + ```ts + @Entry + @Component + struct ListExample1 { + @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"] + @State alignListItem: ListItemAlign = ListItemAlign.Start + + build() { + Column() { + List({ space: 20, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width('100%') + .height(100) + .fontSize(16) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xFFFFFF) + } + .border({ width: 2, color: Color.Green }) + }, item => item) + } + .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed }) + .scrollBar(BarState.On) // 滚动条常驻 + .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果 + + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) + } } - } ``` ![](figures/listcolumn.gif) -```ts - @Entry - @Component - struct ListExample2 { - @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"] - @State alignListItem: ListItemAlign = ListItemAlign.Start - - build() { - Column() { - List({ space: 20, initialIndex: 0 }) { - ForEach(this.arr, (item) => { - ListItem() { - Text('' + item) - .height('100%') - .width(100) - .fontSize(16) - .textAlign(TextAlign.Center) - .borderRadius(10) - .backgroundColor(0xFFFFFF) - } - .border({ width: 2, color: Color.Green }) - }, item => item) - } - .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed }) - .scrollBar(BarState.On) // 滚动条常驻 - .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果 - .listDirection(Axis.Horizontal) // 列表水平排列 - }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) - } - } - ``` + 横向List： + ```ts + @Entry + @Component + struct ListExample2 { + @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"] + @State alignListItem: ListItemAlign = ListItemAlign.Start + + build() { + Column() { + List({ space: 20, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .height('100%') + .width(100) + .fontSize(16) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xFFFFFF) + } + .border({ width: 2, color: Color.Green }) + }, item => item) + } + .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed }) + .scrollBar(BarState.On) // 滚动条常驻 + .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果 + .listDirection(Axis.Horizontal) // 列表水平排列 + }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) + } + } + ``` + ![](figures/listrow.gif) - Scroll组件 - 线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动，再内容外层包裹一个可滚动的容器组件Scroll， - + 线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。在Column或者Row外层包裹一个可滚动的容器组件Scroll实现。 -```ts + 纵向Scroll: + + ```ts @Entry @Component struct ScrollExample { @@ -330,10 +332,11 @@ struct BlankExample { } ``` - ![](figures/scrollrow.gif) - + ![](figures/scrollcolumn.gif) -```ts + 横向Scroll: + + ```ts @Entry @Component struct ScrollExample { @@ -356,7 +359,7 @@ struct BlankExample { }.height('100%') } .backgroundColor(0xDCDCDC) - .scrollable(ScrollDirection.Horizontal) // 滚动方向纵向 + .scrollable(ScrollDirection.Horizontal) // 滚动方向横向 .scrollBar(BarState.On) // 滚动条常驻显示 .scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarWidth(30) // 滚动条宽度 @@ -364,5 +367,4 @@ struct BlankExample { } } ``` - - ![](figures/scrollcolumn.gif) + ![](figures/scrollrow.gif) -- GitLab