Flutter學習筆記(38)--自定義控制項之組合控制項

来源:https://www.cnblogs.com/upwgh/archive/2020/06/23/13182532.html

Flutter中的自定義控制項其實和Android中的很類似,都有組合控制項、自繪控制項。 組合控制項就是將通用的控制項封裝起來,其內部由多個小控制項組合起來實現的,比如說公用的title欄,其實和我們平時寫頁面的時候沒什麼區別。 自繪控制項就是繼承RenderObjectWidget,然後通過提供給我們的Pai... ...


如需轉載,請註明出處:Flutter學習筆記(38)--自定義控制項之組合控制項

在開始之前想先寫點其他的,emm...就是今天在學習到自定義控制項的時候,由於自定義控制項這塊一直是我的短板,無論是Android原生開發還是Flutter,對我來說都是致命傷,內心深處不知道為什麼就是很抵觸...學著學著就突然感覺特煩躁,

不知道自己現在學這些有什麼用,有什麼意義,工作中的項目也用不上,年前換工作的時候,去快手面過Flutter的崗位,很遺憾二面沒有通過,我自己也不死心,想好好準備準備再去試一下,也算是自己的一個小目標吧。

夢想總是要有的,萬一不小心實現了呢!隨便發幾句牢騷,平復下心情,革命尚未成功,同志仍需努力!按照計劃一步一步來吧!

----------------------------------------------------------正文-------------------------------------------------------------

Flutter中的自定義控制項其實和Android中的很類似,都有組合控制項、自繪控制項。

組合控制項就是將通用的控制項封裝起來,其內部由多個小控制項組合起來實現的,比如說公用的title欄,其實和我們平時寫頁面的時候沒什麼區別。

自繪控制項就是繼承RenderObjectWidget,然後通過提供給我們的Paint和Canves進行佈局和繪製。今天就寫一下組合控制項實現的思路和具體做法。

  1. 組合控制項通常是封裝一些多頁面可公用的控制項,這樣方便調用,不用重覆的造輪子,而且更好維護和管理。
  2. Flutter中一切皆組件,而組件又分有狀態組件和無狀態組件,所以,我們在自定義控制項的時候,就要想清楚我們要定義的這個組件是有狀態的還是無狀態的,定好大前提。
  3. 自定義組件的輸入參數是否需要預設值,是否必須輸入(用@require修飾)。
  4. 如果是有狀態組件,通過setState來更改狀態就好了。

下麵我們寫一個例子,就是一個簡單的點贊,Container容器裡面有一個icon一個text,點擊icon,數字增加。

import 'package:flutter/material.dart';

class CombinationWidget extends StatefulWidget {
  @required
  Color color;
  @required
  double width;
  @required
  double height;

  CombinationWidget(this.color, this.width, this.height);

  @override
  State<StatefulWidget> createState() {
    return _CombinationWidgetState(color, width, height);
  }
}

class _CombinationWidgetState extends State {
  Color _color;
  double _width;
  double _height;
  var _startCount = 0;

  _CombinationWidgetState(this._color, this._width, this._height);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ClipOval(
        child: Container(
          color: _color,
          width: _width,
          height: _height,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              IconButton(
                  icon: Icon(
                    Icons.thumb_up,
                    color: Colors.white,
                  ),
                  onPressed: () {
                    setState(() {
                      _startCount += 1;
                    });
                  }),
              Text(
                _startCount.toString(),
                style: TextStyle(fontSize: 25, color: Colors.red),
              )
            ],
          ),
        ),
      ),
    );
  }
}

在使用的地方進行調用

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: CombinationWidget(Colors.blue,200.0,200.0)
    );
  }

 

傳入必要的參數就可以了!再看下效果圖

以上!有任何疑問歡迎留言!

 


您的分享是我們最大的動力!

更多相關文章
  • 不說血淚史,用了網上說的各種存儲過程,各種設置,最後還是第三方軟體解決, 前提:資料庫全表備份,具體怎麼查看度娘一下,用的軟體是ApexSQLLog,資料庫是sqlserver2017向下版本未測試,不知道情況。 百度網盤: https://pan.baidu.com/s/1ACEqEbQ7_UHf ...
  • MySQL LOAD DATA INFILE 從文件(csv、txt)批量導入數據 ...
  • 註意:PostgreSQL 12對主從複製實現和配置做了重大改進,如廢棄了recovery.conf,並將參數轉換為普通的PostgreSQL配置參數,使得配置群集和複製更加簡單。 PostgreSQL資料庫支持多種複製解決方案,以構建高可用性,可伸縮,容錯的應用程式,其中之一是預寫日誌(WAL)傳 ...
  • 插件 sup A Flutter widget which displays an image, a title, and a subtitle for errors, empty states, or just fancy custom messages. pub-rules simple yet ...
  • SwiftUI是一種新穎的構建UI方式和全新的編碼風格,本文以通俗易懂的語言,從Swift 5.1語法新特性和SwiftUI的優勢方面進行分享,希望對熱愛移動端的同學有一定的幫助,讓大家儘可能快速、全面和透徹地理解SwiftUI。 一、背景 蘋果於2019年度WWDC全球開發者大會上,發佈了基於Sw ...
  • 參數說明 (必填) 源碼文件夾絕對路徑(如:/Users/kelei/Documents/work/git/projectName/source) -modifyProjectName [原名稱]>[新名稱] 修改工程名。程式會修改原名稱-Swift.h、Podfile、原名稱-Bridging-H ...
  • ##layout_weight屬性 layout_weight屬性我們常常用到,但有時候會發現它還有一些奇怪的屬性,比如大多數使用時會把寬度設置成0,但要是寬度不設置成0會有什麼效果? layout_weight的屬性意義為權重大於零的控制項會分配剩餘控制項 意義為如控制項屬性設置為wrap_conten ...
  • 萬眾期待的蘋果年度開發者大會這一次雖然只能以線上方式進行,但依舊吸引了大量用戶的關註,當然更多的是開發者和第三方廠商的關註。因為蘋果各個系統的升級和變化,對於未來的開發又有了新的需求。目前,蘋果全球應用開發者已經有2300萬了。 作為軟體開發領域的盛事,蘋果全球開發者大會(WWDC)一直吸引著全世界 ...
一周排行
  • 圖文講解,一門教學級邏輯式編程語言,NMiniKanren,的運行原理。 ...
  • 多Sheet導入教程 說明 本教程主要說明如何使用Magicodes.IE.Excel完成多個Sheet數據的Excel導入。 要點 多個相同格式的Sheet數據導入 多個不同格式的Sheet數據導入 主要步驟 1. 多個相同格式的Sheet數據導入 1.1 創建導入Sheet的Dto 主要代碼如下 ...
  • 在KeyPress事件中寫入 private void txtBoxKeyPress(object sender, KeyPressEventArgs e) { if ((e.KeyChar >= 'a' && e.KeyChar <= 'z') || (e.KeyChar >= 'A' && e. ...
  • 在 Xunit 中使用依賴註入 Intro 之前寫過一篇 xunit 的依賴註入相關的文章,但是實際使用起來不是那麼方便 今天介紹一個基於xunit和微軟依賴註入框架的“真正”的依賴註入使用方式 ——— Xunit.DependencyInjection, 來自大師的作品,讓你在測試代碼里使用依賴註 ...
  • 官網 http://www.hzhcontrols.com/ 前提 入行已經7,8年了,一直想做一套漂亮點的自定義控制項,於是就有了本系列文章。 GitHub:https://github.com/kwwwvagaa/NetWinformControl 碼雲:https://gitee.com/kww ...
  • 在項目的實際開發過程中,我們經常會遇到Tab頁面的開發 EciTab控制項有多種使用方式: 下麵介紹Frame容器方式: 下麵介紹的Tab頁面採用的策略是 Tab頁面管理幾個子頁面,頁面組織上用Iframe管理的模式 採用Iframe的原因主要有兩個 1.開發簡單,每一個頁面都是簡單的畫面 2.性能考 ...
  • 引用的DLL MySql.Data.MySqlClient System.Data City實體 public class City { public int ID { get; set; } public string Name { get; set; } public string Countr ...
  • 案例故事: 即時通訊(IM)軟體有很多,比如企業微信,釘釘,飛書,Skype, 微軟的Lync等, 這些軟體現在都很牛,還能監控誰誰在不在電腦旁工作,誰誰誰提前下班溜了。。。 一次偶然的機會,有個妹子請教我,她每天都想準時18點下班, 她問我如何做到: 假裝企業微信線上,併在2個小時後(20點)準時 ...
  • 一.官方文檔 https://pypi.org/project/muggle-ocr/ 二模塊安裝 pip install muggle-ocr # 因模塊過新,阿裡/清華等第三方源可能尚未更新鏡像,因此手動指定使用境外源,為了提高依賴的安裝速度,可預先自行安裝依賴:tensorflow/numpy ...
  • 前言 ​ 關於 Python 這個欄目,咕了幾個月了,今天講講如何發送驗證碼並驗證。 ​ 因為部分原因,寫這篇文章的時候心情是不太好的,播放首歌吧。 代碼 導入 導入yagmail,random和time庫 import yagmail,random,time #導入 yagmail , rando ...