1. 程式人生 > 其它 >Flutter元件描邊,圓角

Flutter元件描邊,圓角

2019獨角獸企業重金招聘Python工程師標準>>> hot3.png

通常用Container元件的decoration來做

Container(
              padding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey, width: 1.0),
                  borderRadius: BorderRadius.circular(3.0)),
              child: Text(_products[index]['description'])),

padding內邊距屬性,如果不新增描邊會緊貼文字image加上邊距之後image

EdgeInsets支援多種自定義方法

  • EdgeInsets.all() 全方向
  • EdgeInsets.only(left,top,right,bottom) 自定義各方向的邊距
  • EdgeInsets.symmetric(vertical, horizontal)自定義垂直,水平對稱邊距
  • EdgeInsets.fromWindowPadding(ui.WindowPadding padding, double devicePixelRatio) 根據機型螢幕尺寸定義

decoration這裡用到BoxDecoration元件 常用屬性

  • color顏色
  • border 描邊寬度
  • borderRadius 圓角值
  • boxShadow 陰影 支援gradient 梯度,混合模式backgroundBlendMode shape自定義形狀 Border BorderRadius同樣支援多種自定方法.

轉載於:https://my.oschina.net/roycehe/blog/2046289