9-7 [引用]本物のボールの入口領域を達成するために

外側が丸みを帯びた背景で、

各アイコンがクリック可能である、あなたは、対応する詳細ページにジャンプします。

カスタムコンポーネント

ローカル+のナビゲーションのためのタイトルを作成

リストを受信する必要が。また、5つのアイコンの配列を受け取ります。

レセプションのタイプはCommonModel一覧です

下記のカスタムコンポーネントを表示します。

外層は、私たちはその幅と高さの定義を支援するために、コンテナを置きます。
高さは、その後、装飾デコレータを設定し、64に設定されています。

フィレット半径を設定することは、このように設定することができます。

次の重要なのは、コンテナの子です。私たちのコンポーネントの各々の間のパディングを持って

、我々は7に設定水増し、それをラップするために、パディングを設定するために外部の我々のパディングコンポーネントを


我々は方法の項目、過去にコンテキスト転送を作成する方法を作成するには、次のでは。

循環装置内部渡された配列で_Items方法。

私たちは、すべてのコンポーネントがクリック可能であることを願っています。GestureDetector成分と私たちのコンポーネントをラップします。ONTAPは、クリックイベントを処理することができ



、ディスプレイを上下に、直接列を使用することができます。上記はイメージで表示する画像です。

行と最後のリターンはそれを包み

、ここ配置がマナー列に配置されているため。配置は、彼の党はなった


平均アレイ配置に設定されています


このコンポーネントを使用します

定义变量接收数据。导入CommonModel

然后可以可以在loadData里面赋值,localNavList。catch内如果出错的,我们就把loadNav打印出来。


然后使用这个widget

但是这里变成了白色 ,什么都没有显示。这个时候并没有任何的报错,也没有显示任何的内容。


widget内循环的时候该用forEach

这行我们的代码就运行起来了。


间距调小一点。用spaceBetween等分。

底部图片的背景圆角

这里虽然设置了圆角。但是这里看不出来


是因为我们颜色的问题,这里我们改成红色来试试

背景红色 这样图片看起来是有圆角的

但是刚才我们白色背景的时候没有效果,是因为首页的背景也是白色的
设置首页的背景色


再把红色改会白色

这个时候就有圆角了。

设置两边的边距


在我们首页调用这个组件的时候,外层再套一个padding

设置左上右下的边距


这样一来就好很多了




 

结束









 

おすすめ

転載: www.cnblogs.com/wangjunwei/p/12207734.html
おすすめ