Flutter 學習随筆

Card

Card 是卡片元件塊，内容可以由大多數類型的 Widget 構成，Card 具有圓角和陰影，這讓它看起來有立體感。

屬性預覽：

const Card({
    Key key,
    this.color,//顔色
    this.elevation,//設定陰影
    this.shape,//設定圓角
    this.borderOnForeground = true,
    this.margin,//邊距
    this.clipBehavior,//裁剪
    this.child,
    this.semanticContainer = true,
  }) : assert(elevation == null || elevation >= 0.0),
       assert(borderOnForeground != null),
       super(key: key);

clipBehavior屬性值	說明
clipBehavior: Clip.none,	不裁剪
clipBehavior: Clip.hardEdge,	裁剪但不應用抗鋸齒，裁剪速度比none模式慢一點，但比其他方式快。
clipBehavior: Clip.antiAlias,	裁剪而且抗鋸齒，以實作更平滑的外觀。裁剪速度比antiAliasWithSaveLayer快，比hardEdge慢。
clipBehavior: Clip.antiAliasWithSaveLayer,	帶有抗鋸齒的剪輯，并在剪輯之後立即儲存saveLayer。

代碼示例：

var card = new SizedBox(
      child: new Card(
        elevation: 15.0,//設定陰影，即card在z軸的距離，數字越大陰影越重
        color: Colors.grey[100],//設定顔色，數字為顔色飽和度
	    //設定margin邊距
	    //margin: const EdgeInsets.all(20),//可.all進行全部設定
        margin: const EdgeInsets.only(top: 8,left: 10,right: 10),//可.only進行單獨設定
        //設定Card的圓角
        shape: RoundedRectangleBorder(
           // borderRadius: BorderRadius.all(Radius.circular(20.0)), //可.all進行全部設定 
		      borderRadius: BorderRadius.only(  //可.only進行單獨設定
		          topLeft: Radius.circular(20.0),
		          topRight: Radius.zero,
		          bottomLeft: Radius.zero,
		          bottomRight: Radius.circular(20.0)),
		    ),
		 //設定裁剪
		clipBehavior: Clip.none,//不裁剪
        child: new Column(
          children: [
            new Container(
                  decoration: BoxDecoration (
                                   color: Colors.grey[200]
                  ),
                 child: new ListTile(
                                  title: new Text('評審工作',
                                  style: new TextStyle(fontWeight: FontWeight.w500)),
                        ),                                                  
            ),
            new Container(
              constraints: new BoxConstraints.expand(
                height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
              ),
                  child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
                       _buildButtonColumn(color, Icons.alarm_on, '待我接收'),
                       _buildButtonColumn(color, Icons.alarm_add, '待我審批'),
                     ]
                  )
            ),
          ]
        )
      )
    );


			//封裝按鈕
			  Column _buildButtonColumn(Color color, IconData icon, String label) {
			    return Column(
			      mainAxisSize: MainAxisSize.min,
			      mainAxisAlignment: MainAxisAlignment.center,
			      children: [
			        Icon(icon, color: color,size: 35),
			        Container(
			          margin: const EdgeInsets.only(top: 2),
			          child: Text(
			            label,
			            style: TextStyle(
			              fontSize: 15,
			              fontWeight: FontWeight.w400,
			              color:Colors.red[500] ,
			            ),
			          ),
			        ),
			      ],
			    );
			  }

效果圖：

Flutter學習筆記Flutter 學習随筆

//card的标題
                ListTile(
                  title: Text("李四",style: TextStyle(fontSize: 28)),//主标題
                  subtitle: Text("CEO"),//副标題
                ),

Divider

Divider為分割線控件

屬性預覽：

const Divider({
    Key key,
    this.height,//控件高度，分割線在控件内居中
    this.thickness,//分割線的高度
    this.indent,//分割線前面空白區域
    this.endIndent,//分割線後面空白區域
    this.color,//分割線顔色
  }) : assert(height == null || height >= 0.0),
       assert(thickness == null || thickness >= 0.0),
       assert(indent == null || indent >= 0.0),
       assert(endIndent == null || endIndent >= 0.0),
       super(key: key);

代碼示例：

Divider(
              height: 10,
              thickness: 5,
              color: Colors.red,
              indent: 10,
              endIndent: 20,
            ),

效果圖：

Flutter學習筆記Flutter 學習随筆

Container

Container為容器控件，布局使用。

屬性預覽：

Container({
    Key key,
    this.alignment,//容器内，内容對齊方式
    this.padding,//内邊距
    Color color,//顔色
    Decoration decoration,//修飾容器，設定背景和邊框
    this.foregroundDecoration,//設定前景用（可能會遮蓋child内容，一般作為半透明遮蓋（蒙層）效果使用！）
    double width,//寬度
    double height,//高度，若不設定寬高，則Container會盡可能的小（被内容撐起來）
    BoxConstraints constraints,//設定child的屬性，注：double.infinity為無限大。
    this.margin,//外邊距
    this.transform,//可以在其子元件繪制時對其應用一些矩陣變換來實作一些特效
    this.child,
  })

alignment屬性值	說明
alignment:Alignment.center,	容器内，内容垂直水準居中
alignment:Alignment.centerLeft,	容器内，内容垂直居中，水準左對齊
alignment:Alignment.centerRight,	容器内，内容垂直居中，水準右對齊
alignment:Alignment.bottomCenter,	容器内，内容水準居中，緊貼下層
alignment:Alignment.botomLeft,	容器内，内容水準向左，緊貼下層
alignment:Alignment.bottomRight,	容器内，内容水準向右，緊貼下層
alignment:Alignment.topLeft,	容器内，内容水準向左，緊貼上層
alignment:Alignment.topCenter,	容器内，内容水準居中，緊貼上層
alignment:Alignment.topRight,	容器内，内容水準向右，緊貼上層

代碼示例：

new Container(
              alignment:Alignment.center,
              constraints: new BoxConstraints.expand(
                height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
              ),
                  child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
                       _buildButtonColumn(color, Icons.alarm_on, '待我接收'),
                       _buildButtonColumn(color, Icons.alarm_add, '待我審批'),
                     ]
                  )
            ),

效果圖：

Flutter學習筆記Flutter 學習随筆

背景設定漸變色

代碼示例：

new Container(
              constraints: new BoxConstraints.expand(
                height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,

              ),
                decoration: BoxDecoration (
                      color: Colors.grey[200],
                      gradient: LinearGradient(
                          //設定漸變色
                          colors: [Colors.blueAccent, Colors.amber, Colors.purpleAccent],
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          tileMode: TileMode.mirror,
                          stops: [0.1, 0.5, 0.8])
                ),
                  child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.center,
                     children: [
                       _buildButtonColumn(color, Icons.alarm_on, '待我接收'),
                       _buildButtonColumn(color, Icons.alarm_add, '待我審批'),
                     ]
                  )
            ),

效果圖：

Flutter學習筆記Flutter 學習随筆

Row

Row 是一個可以沿水準方向展示它的子元件的元件，用于布局

屬性預覽：

Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.horizontal,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );

crossAxisAlignment屬性值	說明
crossAxisAlignment: CrossAxisAlignment.start	在頂部對齊
crossAxisAlignment: CrossAxisAlignment.end	在底部對齊
crossAxisAlignment: CrossAxisAlignment.center	垂直居中
crossAxisAlignment: CrossAxisAlignment.stretch	拉伸填充滿父布局
crossAxisAlignment: CrossAxisAlignment.baseline	報錯（不知為什麼）

mainAxisAlignment屬性值	說明
mainAxisAlignment: MainAxisAlignment.spaceEvenly,	根據子元件數量平均分布顯示，即每個子元件間隔相等
mainAxisAlignment: MainAxisAlignment.start,	靠左排列
mainAxisAlignment: MainAxisAlignment.end,	靠右排列
mainAxisAlignment: MainAxisAlignment.center,	居中排列
mainAxisAlignment: MainAxisAlignment.spaceAround,	主軸平均分，首尾到兩邊的距離為元件間距的一半
mainAxisAlignment: MainAxisAlignment.spaceBetween,	左右兩頭對齊，中間平均分布

代碼示例：

new Container(
                  constraints: new BoxConstraints.expand(
                    height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
                  ),
                      child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                         children: [
                           _buildButtonColumn(color, Icons.alarm_on, '待我接收'),
                           _buildButtonColumn(color, Icons.alarm_add, '待我審批'),
                           _buildButtonColumn(color, Icons.alarm_add, '待我審批'),
                         ]
                      ),
                ),
                 new Container(
                     constraints: new BoxConstraints.expand(
                       height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,
                     ),
                       child: Row(
                         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: [
                             _buildButtonColumn(color, Icons.alarm_on, '待我接收'),
                             _buildButtonColumn(color, Icons.alarm_add, '待我審批'),
                          ]
                       )
                 )

效果圖：

Flutter學習筆記Flutter 學習随筆

Icon

Icon為圖示元件。

屬性預覽：

const Icon(
    this.icon, {
    Key key,
    this.size,//圖示代銷
    this.color,//圖示顔色
    this.semanticLabel,
    this.textDirection,//添加文本
  })

TextField

TextField為輸入框元件

屬性預覽：

const TextField({
    Key key,
    this.controller,
    this.focusNode,
    this.decoration = const InputDecoration(),
    TextInputType keyboardType,
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.strutStyle,
    this.textAlign = TextAlign.start,
    this.textAlignVertical,
    this.textDirection,
    this.readOnly = false,
    ToolbarOptions toolbarOptions,
    this.showCursor,
    this.autofocus = false,
    this.obscureText = false,
    this.autocorrect = true,
    this.enableSuggestions = true,
    this.maxLines = 1,
    this.minLines,
    this.expands = false,
    this.maxLength,
    this.maxLengthEnforced = true,
    this.onChanged,
    this.onEditingComplete,
    this.onSubmitted,
    this.inputFormatters,
    this.enabled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection = true,
    this.onTap,
    this.buildCounter,
    this.scrollController,
    this.scrollPhysics,
  })

Flutter學習筆記Flutter 學習随筆

Flutter 學習随筆

Card

Divider

Container

Row

Icon

TextField

繼續閱讀

Qt加載Osg的新方式osgQOpenGL簡介一、概述二、運作效果圖三、簡要步驟四、Widget.h代碼五、Widget.cpp代碼六、Main.cpp代碼七、TestOsgQt.pro代碼

Flutter的生命周期二、 App的生命周期

cocostudio UI 筆記

Dart文法學習

Flutter 學習之展示本地圖檔踩坑記錄

QWidget Z-Order研究Z-OrderQML Z-OrderQWidget Z-Order總結

2015-10-30-在Launcher的固定View上添加Widget_墨迹天氣擷取系統已安裝的widget清單添加widget到某個View中其他：

QgraphicsScene類

android 中widget元件

安卓學習筆記之使用widget桌面小控件及源碼分析

android學習日記之provider，service，widget

THINKPHP 3.2.3 widget 調用模闆無顯示

Qt控件：動态波浪與進度顯示

Qt：TreeWidget中添加子控件，并在主視窗接收響應

App Widget的使用

Qt界面用 QAxWidget 調用IWebBrowser2顯示網頁