為了弄懂Flutter的狀態管理, 我用10種方法改造了counter app

来源:https://www.cnblogs.com/mengdd/archive/2020/03/20/flutter-state-management.html
-Advertisement-
Play Games

為了弄懂Flutter的狀態管理, 我用10種方法改造了counter app. ...


為了弄懂Flutter的狀態管理, 我用10種方法改造了counter app

本文通過改造flutter的counter app, 展示不同的狀態管理方法的用法.

可以直接去demo地址看代碼:
https://github.com/mengdd/counter_state_management
切換分支對應不同的實現方式.

Contents

  • Flutter中的狀態管理
    • 狀態分類
    • 狀態管理方法概述
  • Counter sample預設實現: StatefulWidget
  • InheritedWidget
  • Scoped Model
  • Provider
  • BLoC
    • BLoC手動實現
    • BLoC + InheritedWidget做傳遞
    • BLoC rxdart實現
    • BLoC用庫實現
  • rxdart
  • Redux
  • MobX
  • Flutter Hooks
  • Demo說明及感想

Flutter State Management

Flutter是描述性的(declarative), UI反映狀態.

UI = f(state)

其中f代表了build方法.

狀態的改變會直接觸發UI的重新繪製.

UI reacts to the changes.

相對的, Android, iOS等都是命令式的(imperative), 會有setText()之類的方法來改變UI.

狀態分類

狀態分兩種:

  • Ephemeral state: 有時也叫UI state或local state. 這種可以包含在單個widget里.
    比如: PageView的當前頁, 動畫的當前進度, BottomNavigationBar的當前選中tab.
    這種狀態不需要使用複雜的狀態管理手段, 只要用一個StatefulWidget就可以了.
  • App state: 需要在很多地方共用的狀態, 也叫shared state或global state.
    比如: 用戶設置, 登錄信息, 通知, 購物車, 新聞app中的已讀/未讀狀態等.

這種狀態分類其實沒有一個清晰的界限.
在簡單的app里, 可以用setState()來管理所有的狀態; 在app需要的時候, tab的index也可能被抽取到外部作為一個需要保存和管理的app state.

狀態管理方法

官方提供了一些options: Flutter官方文檔 options
目前官方比較推薦的是provider.

各種狀態管理方法要解決的幾個問題:

  • 狀態保存哪裡?
  • 狀態如何獲取?
  • UI如何更新?
  • 如何改變狀態?

Counter Sample預設實現: StatefulWidget

新建Flutter app, 是一個counter app, 自動使用了StatefulWidget來管理狀態.
對這個簡單的app來說, 這是很合理的.

我們對這個app進行一個簡單的改造, 再增加一個button用來減數字.
同樣的方式, 只需要添加一個方法來做減法就可以了.

這種方法的一個變體是, 用StatefulBuilder, 主要好處是少寫一些代碼.

StatefulWidget對簡單的Widget內部狀態來說是合理的.

對於複雜的狀態, 這種方式的缺點:

  • 狀態屬性多了以後, 可能有很多地方都在調用setState().
  • 不能把狀態和UI分開管理.
  • 不利於跨組件/跨頁面的狀態共用. (如何調用另一個Widget的setState()? 把方法通過構造傳遞過來? No, don't do this!)

千萬不要用全局變數法來解決問題.

如果企圖用這種方式來管理跨組件的狀態, 就難免會用這些Anti patterns:

  • 緊耦合. Strongly coupling widgets.
  • 全局保存的state. Globally tracking state.
  • 從外部調用setState方法. Calling setState from outside.

所以這種方法只適用於local state的管理.

InheritedWidget

InheritedWidget的主要作用是在Widget樹中有效地傳遞信息.

如果沒有InheritedWidget, 我們想把一個數據從widget樹的上層傳到某一個child widget, 要利用途中的每一個構造函數, 一路傳遞下來.

Flutter中常用的Theme, Style, MediaQuery等就是inherited widget, 所以在程式里的各種地方都可以訪問到它們.

InheritedWidget也會用在其他狀態管理模式中, 作為傳遞數據的方法.

InheritedWidget狀態管理實現

當用InheritedWidget做狀態管理時, 基本思想就是把狀態提上去.
當子widgets之間需要共用狀態, 那麼就把狀態保存在它們共有的parent中.

首先定義一個InheritedWidget的子類, 包含狀態數據.
覆寫兩個方法:

  • 提供一個靜態方法給child用於獲取自己. (命名慣例of(BuildContext)).
  • 判斷是否發生了數據更新.
class CounterStateContainer extends InheritedWidget {
  final CounterModel data;

  CounterStateContainer({
    Key key,
    @required Widget child,
    @required this.data,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(CounterStateContainer oldWidget) {
    return data.counter.value != oldWidget.data.counter.value;
  }

  static CounterModel of(BuildContext context) {
    return context
        .dependOnInheritedWidgetOfExactType<CounterStateContainer>()
        .data;
  }
}

之後用這個CounterStateContainer放在上層, 包含了數據和所有狀態相關的widgets.
child widget不論在哪一層都可以方便地獲取到狀態數據.

  Text(
    '${CounterStateContainer.of(context).counter.value}',
  ),

代碼分支: inherited-widget.

InheritedWidget缺點

InheritedWidget解決了訪問狀態和根據狀態更新的問題, 但是改變state卻不太行.

  • accessing state
  • updating on change
  • mutating state -> X

首先, 不支持跨頁面(route)的狀態, 因為widget樹變了, 所以需要進行跨頁面的數據傳遞.

其次, InheritedWidget它包含的數據是不可變的, 如果想讓它跟蹤變化的數據:

  • 把它包在一個StatefulWidget里.
  • InheritedWidget中使用ValueNotifier, ChangeNotifier或steams.

這個方案也是瞭解一下, 實際的全局狀態管理還是用更成熟的方案.
但是它的原理會被用到其他方案中作為對象傳遞的方式.

Scoped Model

scoped model是一個外部package: https://pub.dev/packages/scoped_model
Scoped Model是基於InheritedWidget的. 思想仍然是把狀態提到上層去, 並且封裝了狀態改變的通知部分.

Scoped Model實現

它官方提供例子就是改造counter: https://pub.dev/packages/scoped_model#-example-tab-

  • 添加scoped_model依賴.
  • 創建數據類, 繼承Model.
import 'package:scoped_model/scoped_model.dart';

class CounterModel extends Model {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }

  void decrement() {
    _counter--;
    notifyListeners();
  }
}

其中數據變化的部分會通知listeners, 它們收到通知後會rebuild.

在上層初始化並提供數據類, 用ScopeModel.

訪問數據有兩種方法:

  • ScopedModelDescendant包裹widget.
  • ScopedModel.of靜態方法.

使用的時候註意要提供泛型類型, 會幫助我們找到離得最近的上層ScopedModel.

  ScopedModelDescendant<CounterModel>(
      builder: (context, child, model) {
    return Text(
      model.counter.toString(),
    );
  }),

數據改變後, 只有ScopedModelDescendant會收到通知, 從而rebuild.

ScopedModelDescendant有一個rebuildOnChange屬性, 這個值預設是true.
對於button來說, 它只是控制改變, 自身並不需要重繪, 可以把這個屬性置為false.

  ScopedModelDescendant<CounterModel>(
    rebuildOnChange: false,
    builder: (context, child, model) {
      return FloatingActionButton(
        onPressed: model.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      );
    },
  ),

scoped model這個庫幫我們解決了數據訪問和通知的問題, 但是rebuild範圍需要自己控制.

  • access state
  • notify other widgets
  • minimal rebuild -> X -> 因為需要開發者自己來決定哪一部分是否需要被重建, 容易被忘記.

代碼分支: scoped-model

Provider

Provider是官方文檔的例子用的方法.
去年的Google I/O 2019也推薦了這個方法.
和BLoC的流式思想相比, Provider是一個觀察者模式, 狀態改變時要notifyListeners().

有一個counter版本的sample: https://github.com/flutter/samples/tree/master/provider_counter

Provider的實現在內部還是利用了InheritedWidget.
Provider的好處: dispose指定後會自動被調用, 支持MultiProvider.

Provider實現

  • model類繼承ChangeNotifer, 也可以用with.
class CounterModel extends ChangeNotifier {
  int value = 0;

  void increment() {
    value++;
    notifyListeners();
  }

  void decrement() {
    value--;
    notifyListeners();
  }
}
  • 數據提供者: ChangeNotifierProvider.
void main() => runApp(ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ));
  • 數據消費者/操縱者, 有兩種方式: Consumer包裹, 用Provider.of.
  Consumer<CounterModel>(
    builder: (context, counter, child) => Text(
      '${counter.value}',
    ),
  ),

FAB:

  FloatingActionButton(
    onPressed: () =>
        Provider.of<CounterModel>(context, listen: false).increment(),
  ),

這裡listen置為false表明狀態變化時並不需要rebuild FAB widget.

Provider性能相關的實現細節

  • Consumer包裹的範圍要儘量小.
  • listen變數.
  • child的處理. Consumer中builder方法的第三個參數.

可以用於緩存一些並不需要重建的widget:

return Consumer<CartModel>(
  builder: (context, cart, child) => Stack(
        children: [
          // Use SomeExpensiveWidget here, without rebuilding every time.
          child,
          Text("Total price: ${cart.totalPrice}"),
        ],
      ),
  // Build the expensive widget here.
  child: SomeExpensiveWidget(),
);

代碼分支: provider.

BLoC

BLoC模式的全稱是: business logic component.

所有的交互都是a stream of asynchronous events.
Widgets + Streams = Reactive.

BLoC的實現的主要思路: Events in -> BloC -> State out.

Google I/O 2018上推薦的還是這個, 2019就推薦Provider了.
當然也不是說這個模式不好, 架構模式本來也沒有對錯之分, 只是技術選型不同.

BLoC手動實現

不添加任何依賴可以手動實現BLoC, 利用:

  • Dart SDK > dart:async > Stream.
  • Flutter的StreamBuilder: 輸入是一個stream, 有一個builder方法, 每次stream中有新值, 就會rebuild.

可以有多個stream, UI只在自己感興趣的信息發生變化的時候重建.

BLoC中:

  • 輸入事件: Sink<Event> input.
  • 輸出數據: Stream<Data> output.

CounterBloc類:

class CounterBloc {
  int _counter = 0;

  final _counterStateController = StreamController<int>();

  StreamSink<int> get _inCounter => _counterStateController.sink;

  Stream<int> get counter => _counterStateController.stream;

  final _counterEventController = StreamController<CounterEvent>();

  Sink<CounterEvent> get counterEventSink => _counterEventController.sink;

  CounterBloc() {
    _counterEventController.stream.listen(_mapEventToState);
  }

  void _mapEventToState(CounterEvent event) {
    if (event is IncrementEvent) {
      _counter++;
    } else if (event is DecrementEvent) {
      _counter--;
    }
    _inCounter.add(_counter);
  }

  void dispose() {
    _counterStateController.close();
    _counterEventController.close();
  }
}

有兩個StreamController, 一個控制state, 一個控制event.

讀取狀態值要用StreamBuilder:

  StreamBuilder(
    stream: _bloc.counter,
    initialData: 0,
    builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
      return Text(
        '${snapshot.data}',
      );
    },
  )

而改變狀態是發送事件:

  FloatingActionButton(
    onPressed: () => _bloc.counterEventSink.add(IncrementEvent()),
  ),

實現細節:

  • 每個屏幕有自己的BLoC.
  • 每個BLoC必須有自己的dispose()方法. -> BLoC必須和StatefulWidget一起使用, 利用其生命周期釋放.

代碼分支: bloc

BLoC傳遞: 用InheritedWidget

手動實現的BLoC模式, 可以結合InheritedWidget, 寫一個Provider, 用來做BLoC的傳遞.

代碼分支: bloc-with-provider

BLoC rxdart實現

用了rxdart package之後, bloc模塊的實現可以這樣寫:

class CounterBloc {
  int _counter = 0;

  final _counterSubject = BehaviorSubject<int>();

  Stream<int> get counter => _counterSubject.stream;

  final _counterEventController = StreamController<CounterEvent>();

  Sink<CounterEvent> get counterEventSink => _counterEventController.sink;

  CounterBloc() {
    _counterEventController.stream.listen(_mapEventToState);
  }

  void _mapEventToState(CounterEvent event) {
    if (event is IncrementEvent) {
      _counter++;
    } else if (event is DecrementEvent) {
      _counter--;
    }
    _counterSubject.add(_counter);
  }

  void dispose() {
    _counterSubject.close();
    _counterEventController.close();
  }
}

BehaviorSubject也是一種StreamController, 它會記住自己最新的值, 每次註冊監聽, 會立即給你最新的值.

代碼分支: bloc-rxdart.

BLoC Library

可以用這個package來幫我們簡化代碼: https://pub.dev/packages/flutter_bloc

自己只需要定義Event和State的類型並傳入, 再寫一個邏輯轉化的方法:

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  @override
  CounterState get initialState => CounterState.initial();

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield CounterState(counter: state.counter + 1);
    } else if (event is DecrementEvent) {
      yield CounterState(counter: state.counter - 1);
    }
  }
}

BlocProvider來做bloc的傳遞, 從而不用在構造函數中一傳到底.

訪問的時候用BlocBuilderBlocProvider.of<CounterBloc>(context).

  BlocBuilder(
    bloc: BlocProvider.of<CounterBloc>(context),
    builder: (BuildContext context, CounterState state) {
      return Text(
        '${state.counter}',
      );
    },
  ),

這裡bloc參數如果沒有指定, 會自動向上尋找.

BlocBuilder有一個參數condition, 是一個返回bool的函數, 用來精細控制是否需要rebuild.

  FloatingActionButton(
    onPressed: () =>
        BlocProvider.of<CounterBloc>(context).add(IncrementEvent()),
  ),

代碼分支: bloc-library.

rxdart

這是個原始版本的流式處理.

和BLoC相比, 沒有專門的邏輯模塊, 只是改變了數據的形式.

利用rxdart, 把數據做成流:

class CounterModel {
  BehaviorSubject _counter = BehaviorSubject.seeded(0);

  get stream$ => _counter.stream;

  int get current => _counter.value;

  increment() {
    _counter.add(current + 1);
  }

  decrement() {
    _counter.add(current - 1);
  }
}

獲取數據用StreamBuilder, 包圍的範圍儘量小.

    StreamBuilder(
      stream: counterModel.stream$,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        return Text(
          '${snapshot.data}',
        );
      },
    ),

Widget dispose的時候會自動解綁.

數據傳遞的部分還需要進一步處理.

代碼分支: rxdart.

Redux

Redux是前端流行的, 一種單向數據流架構.

概念:

  • Store: 用於存儲State對象, 代表整個應用的狀態.
  • Action: 事件操作.
  • Reducer: 用於處理和分發事件的方法, 根據收到的Action, 用一個新的State來更新Store.
  • View: 每次Store接到新的State, View就會重建.

Reducer是唯一的邏輯處理部分, 它的輸入是當前StateAction, 輸出是一個新的State.

Flutter Redux狀態管理實現

首先定義好action, state:

enum Actions {
  Increment,
  Decrement,
}

class CounterState {
  int _counter;

  int get counter => _counter;

  CounterState(this._counter);
}

reducer方法根據action和當前state產生新的state:

CounterState reducer(CounterState prev, dynamic action) {
  if (action == Actions.Increment) {
    return new CounterState(prev.counter + 1);
  } else if (action == Actions.Decrement) {
    return new CounterState(prev.counter - 1);
  } else {
    return prev;
  }
}
  • 數據提供者: StoreProvider.
    放在上層:
   StoreProvider(
    store: store,
    child: MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    ),
  );
  • 數據消費者: StoreConnector, 可讀可寫.

讀狀態:

    StoreConnector<CounterState, String>(
      converter: (store) => store.state.counter.toString(),
      builder: (context, count) {
        return Text(
          '$count',
        );
      },
    )

改變狀態: 發送action:

    StoreConnector<CounterState, VoidCallback>(
      converter: (store) {
        return () => store.dispatch(action.Actions.Increment);
      },
      builder: (context, callback) {
        return FloatingActionButton(
          onPressed: callback,
        );
      },
    ),

代碼分支: redux.

MobX

MobX本來是一個JavaScript的狀態管理庫, 它遷移到dart的版本: mobxjs/mobx.dart.

核心概念:

  • Observables
  • Actions
  • Reactions

MobX狀態管理實現

官網提供了一個counter的指導: https://mobx.netlify.com/getting-started

這個庫的實現需要先生成一些代碼.
先寫類:

import 'package:mobx/mobx.dart';

part 'counter.g.dart';

class Counter = _Counter with _$Counter;

abstract class _Counter with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }

  @action
  void decrement() {
    value--;
  }
}

運行命令flutter packages pub run build_runner build, 生成counter.g.dart.

改完之後就不需要再使用StatefulWidget了.

找一個合適的地方初始化數據對象並保存:

final counter = Counter();

讀取值的地方用Observer包裹:

Observer(
  builder: (_) => Text(
    '${counter.value}',
    style: Theme.of(context).textTheme.display1,
  ),
),

改變值的地方:

  FloatingActionButton(
    onPressed: counter.increment,
    tooltip: 'Increment',
    child: Icon(Icons.add),
  ),

代碼分支: mobx.

Flutter hooks

React hooks的Flutter實現.
package: https://pub.dev/packages/flutter_hooks

Hooks存在的目的是為了增加widgets之間的代碼共用, 取代StatefulWidget.

首頁的例子是: 對一個使用了AnimationControllerStatefulWidget的簡化.

flutter_hooks包中已經內置了一些已經寫好的hooks.

Flutter hooks useState

counter demo一個最簡單的改法, 就是將StatefulWidget改為HookWidget.

build方法里:

final counter = useState(0);

調用useState方法設定一個變數, 並設定初始值, 每次值改變的時候widget會被rebuild.

使用值:

  Text(
    '${counter.value}',
  ),

改變值:

  FloatingActionButton(
    onPressed: () => counter.value++,
  ),

實際上是把StatefulWidget包裝了一下, 在初始化Hook的時候註冊了listener, 數據改變的時候調用setState()方法.
只是把這些操作藏在hook里, 不需要開發者手動調用而已.

所以本質上還是StatefulWidget, 之前解決不了的問題它依然解決不了.

代碼分支: flutter-hooks.

Demo

本文demo地址: https://github.com/mengdd/counter_state_management
每個分支對應一種實現. 切換不同分支查看不同的狀態管理方法.

對於代碼的說明:
這是counter app用不同的狀態管理模式進行的改造.
因為這個demo的邏輯和UI都比較簡單, 可能實際上並不需要用上一些複雜的狀態管理方法, 有種殺雞用牛刀的感覺.
只是為了保持簡單來突出狀態管理的實現, 說明用法.

一些自己的感想

老實說, 做了這麼多年Android, 各種構架MVP, MVVM, MVI, 目的就是數據和邏輯分離, 邏輯和UI分離,
所以初識Flutter的時候對這種萬物皆widget, 一個樹裡面包含一切的方式有點懷疑, UI邏輯數據寫成一堆, 程式功能複雜後, 肯定會越寫越亂.

但是瞭解了它的狀態管理之後, 發現Flutter的狀態管理就是它的程式構架, 並且也是百家爭鳴各取所需.
只是Flutter的構架是服務於Flutter framework的設計思想的, 要遵從利用它, 而不是與之反抗.
愛它如是, 而不是如我所願.

印證了一些道理:

  • 不要只喜歡自己熟悉的東西.
  • 瞭解之後才有發言權.

參考

Google I/O

InheritedWidget

Scoped Model

provider

Bloc

Redux

MobX


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

-Advertisement-
Play Games
更多相關文章
  • ORA-00001: 違反唯一約束條件 (.) ORA-00017: 請求會話以設置跟蹤事件 ORA-00018: 超出最大會話數 ORA-00019: 超出最大會話許可數 ORA-00020: 超出最大進程數 () ORA-00021: 會話附屬於其它某些進程;無法轉換會話 ORA-00022: ...
  • 問題描述:本來還在愉快的工作中,突然同時通知客戶主資料庫無法登陸了,心中莫名的一緊,趕緊登陸資料庫查看,發現只有sys賬號可以正常登錄,其他賬號登錄均提示ORA00257錯誤。趕緊百度一下,看大致的意思為歸檔日誌寫滿了、閃回日誌寫滿了。根據網上提供的方法進行查看:select * from v$re... ...
  • Mapping (映射)類似關係型資料庫中的表的結構定義。我們將數據以 JSON 格式存入到 ElasticSearch 中後,在搜索引擎中 JSON 欄位映射對應的類型,這時需要 mapping 來定義內容的類型。 ...
  • 前言: 有時候,連接MySQL的會話經常會異常退出,錯誤日誌里會看到"_Got an error reading communication packets_"類型的告警。本篇文章我們一起來討論下該錯誤可能的原因以及如何來規避。 1.狀態變數Aborted_clients和Aborted_conne ...
  • 場景 Centos中Redis的下載編譯與安裝(超詳細): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103967334 Redis的啟動和關閉(前臺啟動和後臺啟動): https://blog.csdn.net/BADAO_ ...
  • 1.從SQLite官網下載所需要的安裝包文件,安裝之後在對應的bin文件夾下獲取所需要的dll文件,主要包括system.data.sqlite.dll,以及sqlite.interop.dll;; 2.將此部分dll複製到生成解決方案文件目錄,並將system.data.sqlite.dll文件添 ...
  • GIF壓縮有問題,運行很順滑!!! 1.自定義View——支持設置畫筆顏色,畫筆寬度,畫板顏色,清除畫板,檢查是否有簽名,保存畫板圖片(複製粘貼可直接使用) /** * Created by YyyyQ on 2020/3/5. * 電子簽名 */ public class SignatureVie ...
  • 創建版本的時候,運營不小心寫錯了,原以為不能修改,原來是在這裡,請看下圖 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...