Flutter Container容器元件介紹

2021-10-09 15:39:58 字數 1601 閱讀 3150

一、container元件容器布局介紹:

1)、container 在flutter裡大量使用,乙個容器元件,必掌握元件之一,可以理解是html中的div;官方給出的簡介,是乙個結合了繪製(painting)、定位(positioning)以及尺寸(sizing)widget的widget。

二、繼承關係

object>diagnosticable>diagnosticabletree>widget>statelesswidget>container
從繼承關係可以看出,container是乙個statelesswidget。container並不是乙個最基礎的widget,它是由一系列的基礎widget組合而成。

三、構造方法中屬性說明:

container()
四、屬性介紹

1、alignment:  topcenter:頂部居中對齊

topleft:頂部左對齊

topright:頂部右對齊

center:水平垂直居中對齊

centerleft:垂直居中水平居左對齊

centerright:垂直居中水平居右對齊

bottomcenter底部居中對齊

bottomleft:底部居左對齊

bottomright:底部居右對齊

2、padding: 內邊距

3、margin: 外邊距

4、color:容器背景色

5、foregrounddecoration:前景裝飾

6、constraints:容器大小的限制條件

7、transform:container 容器進行一些旋轉、移動之類的操作

8、width: 容器寬度

9、height: 容器高度

10、decoration:裝飾   boxdecoration型別

針對 decoration 屬性簡單使用說明,以下介紹boxdecoration的屬性:

const boxdecoration()
注意事項: 屬性 decoration 和color 併排使用,decoration 屬性存在,則color 屬性無效並報錯,即使用boxdecoration中color屬性;

gradient  >  image >  color    就是說 他們同時使用時 會優先顯示gradient定義內容;shape不能同borderradius一起使用  衝突,編譯錯誤

五、**示例:

import 'package:flutter/material.dart';

class containerpage extends statefulwidget ) : super(key: key);

@override

_containerpagestate createstate() => _containerpagestate();

}class _containerpagestate extends state 

}

效果圖

UI元件 和 容器元件

像原來的 import react,from react import antd dist antd.css import from antd import store from store index.js import from store actioncreators class beauti...

容器元件和展示元件react redux

react redux的作用是連線 connect store和容器元件的。store是redux提供的,容器元件是react提供的。容器元件 位於應用最頂層的元件,用來與redux連線的。從redux中獲取資料作為props。展示元件 位於應用的中間或者子元件,是純粹的元件,與redux沒有關係。...

uniapp 容器元件view

屬性 hover class 類名 按下的樣式 hover stop propagation 是否阻止冒泡,預設不阻止 hover start time 毫秒 按下的時間顯示樣式 hover stay time 毫秒 鬆開後樣式的保留時間 示例 box hover class box1 hover ...