電子產(chǎn)業(yè)一站式賦能平臺(tái)

PCB聯(lián)盟網(wǎng)

搜索
查看: 70|回復(fù): 0
收起左側(cè)

HarmonyOS學(xué)習(xí)路之開(kāi)發(fā)篇—Java UI框架(Table Layout)

[復(fù)制鏈接]

660

主題

660

帖子

4567

積分

四級(jí)會(huì)員

Rank: 4

積分
4567
跳轉(zhuǎn)到指定樓層
樓主
發(fā)表于 2023-8-9 12:00:00 | 只看該作者 |只看大圖 回帖獎(jiǎng)勵(lì) |倒序?yàn)g覽 |閱讀模式

5 e( n( C# z+ E( ^2 T" w% S點(diǎn)擊上方藍(lán)色字體,關(guān)注我們4 P$ P* \& \9 Z* N3 V
Tablelayout使用表格的方式劃分子組件。
  K( w1 ^& Q# D& T" ?. w2 y! v- q+ S6 {# p2 {

1 D: O% ^0 Y9 ], v, g# q, ~% O, Z6 E
TableLayout的共有XML屬性繼承自:Component。; m0 G- Y/ l' \6 z

& h, r; U9 ]8 _TableLayout的自有XML屬性見(jiàn)下表:, ?  w3 E: v/ m

) }5 }5 n; F" M7 [5 |9 v; ^" _" J9 K' Y# q$ {6 Q
                       
" C) m3 u1 s5 @1 i& f0 l& D  z4 v                        屬性名稱(chēng)
% o# m4 U  o/ N9 P8 \% Y8 U                        5 m  K) l/ o8 J2 k, ]9 D* R1 H" h
                       
; n3 r0 d5 ~* E4 b' o# P                        中文描述
: o6 |6 W1 f1 M! L8 O* C, c                       
4 |4 o% j& l5 I2 v4 r3 _' X                       
* @. U" o, L( k  A* f, R9 Y* [. b                        取值" X$ _8 N6 s& C7 [' ^  ]
                       
5 m4 u  K9 n4 o  Y$ }                        ( K  [: V) N2 c
                        取值說(shuō)明
0 |  D( u) E4 s                        : T7 l& O3 a8 y8 n7 N) r* s& @
                          o8 X. H/ r6 N# y
                        使用案例
& u6 Y/ N# n, ~0 W                        6 D2 l& w( N" f+ s5 _  C6 n
                ; J) F; M! B% _6 s
       
/ [2 P8 A4 R7 i2 u- k- B       
1 i. }, w* I2 i+ B; j               
' b3 B& i) z: F. X" T  w) u                        : l- M4 y! s! ^6 d" }
                        alignment_type
2 V: |& U0 r) X# l! X$ g4 M                       
: z! h+ f. L! f/ G# f7 |( a3 Y9 f                        1 a1 L) }# T: P. [. b" e7 c& R) b
                        對(duì)齊方式
# i) l. b0 G# u" d                        $ p5 @/ _5 n  o; H
                       
: Z3 y) K& z0 }8 [" p2 {                        align_edges
. u7 c$ W# q, K+ H! {8 }                        ! j8 }3 I% C" A! l' ~! x
                       
6 F. O5 X0 Z$ n' B2 R3 Z1 T, K! G1 x                        表示TableLayout內(nèi)的組件按邊界對(duì)齊。' U: c# F8 H/ l* E  s& x% q6 y
                        ' A3 |& u2 j, K8 e* u
                       
8 W) S! e4 t1 k                        ohos:alignment_type="align_edges"
4 W  U1 G$ q9 f- O4 f, m' C  H- ]                        ! ?; C  ^! W; Q0 m2 @! H  o+ m
               
( H- n: v2 w$ [7 v, d: S' G                % }: e. b. u; v: @% e
                       
$ g9 S. Q0 o* Q8 d8 G1 Z7 k" h                        align_contents  E" f: d' L) }6 ]7 j) t
                       
# q9 j/ ?& L" i! \                       
& b& {  @8 |' e  u; k                        表示TableLayout內(nèi)的組件按邊距對(duì)齊。
# L0 l( Y2 s" l3 y                       
+ Q! r# H6 z7 `$ X/ K; K                        0 p- o  }( ?# ?* C0 A/ @4 }, A+ `2 c
                        ohos:alignment_type="align_contents". a/ c3 f& S3 n8 S' `
                       
3 Y  p4 g- I$ f. S# {# f8 G                ' J& n1 g' S2 c$ k) N
               
+ b5 t0 _4 m, L7 k, F                       
0 S0 m% _: s! W2 _! A6 r                        column_count
6 f* ~; T) e% \; e% F                        ; o2 d& y( W& B) w2 ?- v" Q
                        0 C7 N: D" F8 R# @! h
                        列數(shù)0 R, W% y; E4 c/ _' P. ^
                        ; D( u# z0 `* h6 O
                       
( w! \) |3 d$ Y4 z9 J+ O/ }/ ^                        integer類(lèi)型
) q2 s" }1 [' o) B1 k( C/ l0 S                        ( J: a+ M$ O) J# ~0 T
                       
7 |) Y7 m; G# w  f( z                        可以直接設(shè)置整型數(shù)值,也可以引用integer資源。. B% S! A7 U2 B* D5 _
                       
1 W+ b0 z* i6 B# M- B  G5 P                       
& u2 z4 T9 D: X                        ohos:column_count="3"; L3 r( [/ c# |. L( {
, ^, K5 G$ ]; ]) t2 U
                        ohos:column_count="$integer:count"
. J; P6 x3 z" f+ J3 x8 g" q                        & `/ p) H* N3 p$ H+ [1 `- E
                8 y* R# f* C+ x3 m
               
% O$ r- s3 z2 @* M                       
2 ]+ W- d- M  j0 E                        row_count
) n, v2 j8 X+ ~5 Z5 z# Y0 o# z                        7 r  @0 D2 b  d' l% }* K" `
                        * x# m0 @7 q9 G1 y8 Y4 S: t, Y4 l6 L  K
                        行數(shù)
5 m3 R' u- h8 X  V                       
  v3 R5 K  L" H3 c! ?                       
, x& q8 T5 _1 D5 V% J) x! Y' f, J                        integer類(lèi)型
, o5 w2 b! L: a                       
) e+ T$ z1 M9 j                       
- E3 U  I; _* W/ s* l3 M                        可以直接設(shè)置整型數(shù)值,也可以引用integer資源。2 H) b3 M3 R% V4 f
                        9 c5 k  X! f( D
                        8 k; L# h3 s6 t% N4 \/ `* v
                        ohos:row_count="2"  l2 g9 a! d1 h, H$ y2 m: X, e

) A4 G" |; L9 L+ B' q% y* ~4 I                        ohos:row_count="$integer:count"
% @' L& C  A. O; T1 H& l! z                       
2 ?% e, j$ Z% J2 W, g               
# C6 T9 a& V% ~6 G: `               
+ v. L* Q! a' `* E# [( V/ ]                        4 H0 Q. l9 {: u0 m& D# b7 i% g
                        orientation) l* i/ W% A/ }* v0 `( l( P5 a
                       
  i  [. }5 w+ ]* J4 \                       
2 W8 g( {5 U! {  P3 q# s1 o                        排列方向
6 B' g9 w6 U7 ]. L                        / b7 v) w5 a9 `' C1 o9 C) G
                        3 \! J  b! T: `. t! D
                        horizontal
3 h! t9 q9 Z( b3 u9 e; j8 H; K                        2 [: X4 D$ {0 H* a/ x7 q
                        8 R. |% J1 t) N3 Q
                        表示水平方向布局。( F3 i# k7 S( C% y2 x% J. v
                        ( ?  s/ w' d1 G3 H7 d
                        $ S, a7 C" e6 H, r: U8 o$ j/ z: C
                        ohos:orientation="horizontal"
8 b, G- R% H9 I                       
1 B/ Y. i$ G: z, |7 y% L9 o$ n- z               
  ~+ K) {1 R3 l5 M; O* e                6 Q4 c- m( Q- v/ L
                        / T$ `, B; j" R; I/ x
                        vertical5 Y' S) w4 c( p) ~
                        $ h  T. `/ u& ]7 s! u7 p, D; R$ q
                       
& v1 x- @. O3 U/ ~6 o6 u- u                        表示垂直方向布局。
0 T) g& z( y/ T: x% x                       
  z+ S3 U) A  {& E' K! G0 `0 `                       
4 B' ^5 J8 n3 K; K, A  C. f                        ohos:orientation="vertical"
+ p8 f& L0 B  E7 V& g& A6 N. t                       
7 E3 {; F- K7 a; a# ?* u               
  C7 x3 g1 p+ Q$ E在XML中創(chuàng)建TableLayout,示例代碼如下:4 K! j. r8 Q( [; n- r- j4 X5 x
  • [table]/tablelayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="#87CEEB"    ohos:padding="[table]/tablelayout
    + Y9 t" G( ^1 T: j( w6 I在graphic文件夾下創(chuàng)建Text的背景table_text_bg_element.xml,示例代碼如下:+ J9 k- M/ [" d* z/ H4 {8 \# `
  • "http://schemas.huawei.com/res/ohos"ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>    ohos:color="#00BFFF"/>"http://schemas.huawei.com/res/ohos" * p* y1 ]& N* q9 S/ X
    在TableLayout布局中添加子組件。
    6 g* Y( A3 w9 K3 A6 a/ K( {9 ~
    2 J. f% s* {0 q# j7 O+ P8 O9 x
  • xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_parent"    ohos:width="match_parent"    ohos:background_element="#87CEEB"    ohos:padding="8vp">    ohos:height="60vp"        ohos:width="60vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:text="1"        ohos:text_alignment="center"        ohos:text_size="20fp"/>9 [! U& r6 @, X3 @& O
        ohos:height="60vp"        ohos:width="60vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:text="2"        ohos:text_alignment="center"        ohos:text_size="20fp"/>
    5 }9 C  V4 M5 S' B; c: s( j& i    ohos:height="60vp"        ohos:width="60vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:text="3"        ohos:text_alignment="center"        ohos:text_size="20fp"/>
    . i1 w5 k$ K; y    ohos:height="60vp"        ohos:width="60vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:text="4"        ohos:text_alignment="center"        ohos:text_size="20fp"/>[table]- a, u/ X- \- o% y
    TableLayout默認(rèn)一列多行。
    : |# c3 b$ P' z2 y; K  @( y9 d5 u. Z8 ?: b; u6 \( B8 C

    : E8 e+ M, V# d4 b, A- a2 B* s* G1 M* e+ o
    設(shè)置行列數(shù):
    6 j, B/ t1 D; r2 }; ]
    ' w5 V0 i4 l" P  L  g
  • ...    ohos:row_count="2"    ohos:column_count="2">7 V; u/ f3 B: c4 c( p
    設(shè)置TableLayout的行為2,列為2效果。
    6 R0 g/ M; \" C- e; Q9 }1 @$ [" t8 {* j% G% r
    & T8 q$ |8 L1 y  P# Z

    " }7 n. y- E- Q' [* Y" c% y在XML中設(shè)置布局排列方向,以“vertical”為例:" Y1 V( G  p# Y8 ?2 d* H2 d
    : f1 {% K; h: j/ b& [6 ]; M
  • ...    ohos:orientation="vertical">    ...* @4 |7 X5 a/ ~8 C# L. u3 ^- q
    設(shè)置布局排列方向?yàn)椤皏ertical”的效果。8 C' N% R( R1 h
    6 C# ~+ F* g; g- u4 a, ?: _
    0 y8 b' E4 U1 Z7 _! ^% D- g

    / n1 x1 c! x. `, h( m/ R  F3 U5 s7 u' N: XTableLayout提供兩種對(duì)齊方式,邊距對(duì)齊“align_contents”、邊界對(duì)齊“align_edges”,默認(rèn)為邊距對(duì)齊“align_contents”。代碼如下:
    8 N9 x  z  T9 T% N0 z8 w1 d. d" a$ [: S) g8 [
  • xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_content"    ohos:width="match_content"    ohos:alignment_type="align_contents"    ohos:background_element="$graphic:layout_borderline"    ohos:column_count="3"    ohos:padding="8vp"># }. k3 f; E8 m# f7 s7 E
        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:padding="8vp"        ohos:text="1"        ohos:text_alignment="center"        ohos:text_size="14fp"/>" |6 d# V; J. M6 Q
        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="16vp"        ohos:padding="8vp"        ohos:text="2"        ohos:text_alignment="center"        ohos:text_size="14fp"/>) L' ?" m* a3 m# k
        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="32vp"        ohos:padding="8vp"        ohos:text="3"        ohos:text_alignment="center"        ohos:text_size="14fp"/>8 V' `* z$ M6 {: R( B* Y
        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="32vp"        ohos:padding="8vp"        ohos:text="4"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
      F: q: k5 g2 g& |    ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="16vp"        ohos:padding="8vp"        ohos:text="5"        ohos:text_alignment="center"        ohos:text_size="14fp"/>5 z+ m+ l6 A! b9 `
        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="8vp"        ohos:padding="8vp"        ohos:text="6"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
    1 f8 l6 r, ?  X/ M- Y# X* a, T+ E9 {邊距對(duì)齊效果:: u' p1 F- i* t( C" K
    : F1 I- B/ }; s

    ; X9 T( J$ Y7 T( n7 L& ~  q
    : {4 r" i6 _5 ^$ Z2 h將TableLayout的對(duì)齊方式修改為邊界對(duì)齊。
    0 Z% P9 L% n% b* V( Q* e& n5 v- G! ^8 c5 c( l* x' S# Y
  • ...    ohos:alignment_type="align_edges">    ...6 o, z! O% c$ z, c! F& o3 ]
    邊界對(duì)齊效果:
    4 C; s) G! q8 Y  m3 D$ t0 ~
    , ]7 \5 s" n2 S- l  M4 _
    3 e1 p! P2 B8 S7 Z  x' L$ ?' n; z. J7 _( _) Z
    引用graphic文件夾下的背景資源文件為layout_borderline.xml,示例代碼如下:
    # T# W! ]  |* F6 t/ \
    2 y( @/ b, E# U8 P& [
  • "http://schemas.huawei.com/res/ohos" ohos:shape="rectangle">    ohos:radius="5vp"/>    ohos:width="1vp"        ohos:color="gray"/>
    4 q( e6 J6 ^4 [1 v; ], }! |  I% r! C& e3 I  z% e! F1 g
    TableLayout合并單元格的效果可以通過(guò)設(shè)置子組件的行列屬性來(lái)實(shí)現(xiàn)。5 D7 s+ ], w. a$ y2 b' A
    , q4 F# J3 w; L% d$ O; C
    設(shè)置子組件的行列屬性均為2的效果展示:8 x2 Q, M/ r1 N/ C% A5 E7 @9 E6 e

    1 q' s+ a* D/ C$ Z) }" V 8 S* b' [( S6 x3 ]( P& `. D- X

    8 E5 Z, z* d  X, a+ o/ }在XML中創(chuàng)建TableLayout,并添加子組件,代碼如下:7 O* _3 |/ K  w+ H; A' v4 V

    ) {1 w9 h5 d" s! k8 [2 p! Z
  • xmlns:ohos="http://schemas.huawei.com/res/ohos"    ohos:height="match_content"    ohos:width="match_content"    ohos:alignment_type="align_edges"    ohos:background_element="$graphic:layout_borderline"    ohos:column_count="3"    ohos:padding="8vp"    ohos:row_count="3">9 D1 s# d1 a* U( B- j+ ^( c
        ohos:id="$+id:text_one"        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="16vp"        ohos:padding="8vp"        ohos:text="1"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
    * ?$ M  X8 u. Z# |- J0 l# t/ |    ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="16vp"        ohos:padding="8vp"        ohos:text="2"        ohos:text_alignment="center"        ohos:text_size="14fp"/>
    8 d- Y9 G8 O; G3 h" g& a8 V3 A& y    ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="16vp"        ohos:padding="8vp"        ohos:text="3"        ohos:text_alignment="center"        ohos:text_size="14fp"/>/ b7 V+ A- v" Z
        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="16vp"        ohos:padding="8vp"        ohos:text="4"        ohos:text_alignment="center"        ohos:text_size="14fp"/>0 M0 h6 U* i8 T6 x( s
        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="16vp"        ohos:padding="8vp"        ohos:text="5"        ohos:text_alignment="center"        ohos:text_size="14fp"/>  X' S4 q/ ~, h& m  g) o  w
        ohos:height="48vp"        ohos:width="48vp"        ohos:background_element="$graphic:table_text_bg_element"        ohos:margin="16vp"        ohos:padding="8vp"        ohos:text="6"        ohos:text_alignment="center"        ohos:text_size="14fp"/>: z% e6 ~. I# Q
    在Java代碼中設(shè)置子組件的行列屬性,代碼如下:& c" e  r. D. x# p2 g/ e* \
    - Z) ?" ^) K1 G3 @/ ~+ u! g4 {
  • @Override    protected void onStart(Intent intent) {        ...        Component component = findComponentById(ResourceTable.Id_text_one);        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(vp2px(72), vp2px(72));        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2);        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2);        component.setLayoutConfig(tlc);    }
    + i* d- M. B3 V    private int vp2px(float vp) {        return AttrHelper.vp2px(vp, getContext());    }: M4 a  t8 b  c) d- v5 ]1 y
    在設(shè)置子組件的行列屬性時(shí),TableLayout剩余的行數(shù)和列數(shù)必須大于等于該子組件所設(shè)置的行數(shù)和列數(shù)。
    * X$ `, N( l$ {
    0 q0 I0 |* i+ d3 H目前僅支持Java代碼設(shè)置TableLayout子組件的行列屬性。0 W8 f9 Q2 T' x- z6 K! v
    在創(chuàng)建子組件的行列屬性時(shí),還可設(shè)置子組件的對(duì)齊方式,修改上述Java代碼如下:" s7 E2 G+ c5 _' ^$ e- R+ Q9 Y
    9 C! M0 d, R% x" I* {6 U
  • @Override    protected void onStart(Intent intent) {        ...        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 2, TableLayout.Alignment.ALIGNMENT_FILL);        ...    }! ~/ S5 `6 w" @" I3 w, o2 n
    子組件的對(duì)齊方式設(shè)置為ALIGNMENT_FILL的效果:
    4 o! @; y% y) A/ B- |4 y' L1 \+ Z. o& @3 I6 }; }

    * Z' U3 ~% g6 H$ M% s0 T' l) R6 Q( v: \% k
    設(shè)置子組件的權(quán)重,代碼如下:
    0 N1 U" }1 V# m( a. n! h5 m
    : e2 X8 B8 \' _" G" p! j
  • @Override    protected void onStart(Intent intent) {        ...        TableLayout.LayoutConfig tlc = new TableLayout.LayoutConfig(0, vp2px(48));        tlc.columnSpec = TableLayout.specification(TableLayout.DEFAULT, 1, 1.0f);        tlc.rowSpec = TableLayout.specification(TableLayout.DEFAULT, 1);
    " `. {  S% N6 s  \! ^- {. e! B6 T% U, f        findComponentById(ResourceTable.Id_text_one).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_two).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_three).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_four).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_five).setLayoutConfig(tlc);        findComponentById(ResourceTable.Id_text_six).setLayoutConfig(tlc);    }! f, ~5 a4 U. R  Y  w" ]
    上述代碼將子組件的寬度權(quán)重設(shè)置為1.0,每行子組件會(huì)均分TableLayout的寬度,所以需要設(shè)置TableLayout為固定寬度或match_parent。3 h$ m# i2 `" h; L9 W6 _

    * v$ H: h4 u7 w; [) K+ x
  • ohos:width="match_parent"    ...>
    3 d3 ~  u8 V( k: B5 m; K9 \    ohos:id="$+id:text_one"        .../>
    / ]4 H: M% T; G3 w, B    ohos:id="$+id:text_two"        .../>( h, I! }4 H, P/ v6 a$ @
        ohos:id="$+id:text_three"        .../>8 V; _: X, x& d* B/ I% X
        ohos:id="$+id:text_four"        .../>
    - s* \: q1 h4 U- @    ohos:id="$+id:text_five"        .../>
    5 Z+ P4 u# F8 y5 {; M8 Y* ?    ohos:id="$+id:text_six"        .../>[table]
    # A& `$ x- a6 u; d將子組件的寬度權(quán)重設(shè)置為1.0的效果展示:) \# P# _' o7 A9 Q0 _
    5 v# k# h# \! r5 @* ]
    / ]0 e+ @4 @1 @+ Q

    5 t5 L0 }+ z6 E7 e( n4 Q  [
    ; u* x/ r6 K' t& J0 n; g1 N ' w2 A4 ^, N$ n: T3 S; _) h  G
    往期推薦基于Mobile SDK V5版固件開(kāi)發(fā)大疆無(wú)人機(jī)手機(jī)端遙控器(5)
    - M* E; Z7 N) J8 h5 S- R' U一種高速ADC和DAC轉(zhuǎn)換電路分享. q4 w) Z) r- o. m( z9 F  H
    一文搞懂CAN和CAN FD總線(xiàn)協(xié)議# ?% i$ P" u' g9 y$ T/ _
    LabVIEW和Arduino的巧妙結(jié)合(基礎(chǔ)篇—1)
    ! {! n3 J1 a- y' t3 g( w; PLabVIEW設(shè)計(jì)自定義滾動(dòng)條
    . P7 g2 x, G9 M% l3 Q
    7 ]. U4 h5 p, c& f  n' Y, h' W4 P
    2 ~6 W0 L0 @& i3 _7 d7 p! T  e+ o9 n
    & j, m; F: L' O
    1 m- R; E! k3 [0 u0 j/ O
    點(diǎn)擊閱讀原文,更精彩~
  • 發(fā)表回復(fù)

    本版積分規(guī)則


    聯(lián)系客服 關(guān)注微信 下載APP 返回頂部 返回列表