{"id":405202,"date":"2024-06-29T18:10:57","date_gmt":"2024-06-29T18:10:57","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=405202"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=405202","title":{"rendered":"Unity: \u041a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 ListView \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438?<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 ListView c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438.<\/p>\n

<\/div>\n

\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Unity UI Toolkit<\/a> \u0432 \u043f\u0430\u0440\u0435 \u0441 UnityMvvmToolkit<\/a>. \u042f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b \u043f\u0440\u043e UnityMvvmToolkit \u0441\u0442\u0430\u0442\u044c\u044e \u0432\u043e\u0442 \u0437\u0434\u0435\u0441\u044c<\/a>. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 API \u043f\u0440\u0438\u0442\u0435\u0440\u043f\u0435\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435, \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u043b\u044e\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0434\u0430\u0439\u0442\u0435 \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u043d\u0430\u043f\u0438\u0448\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e \u043d\u0435\u0439.<\/p>\n

\u0422\u0430\u043a \u043a\u0430\u043a \u0441\u043f\u0438\u0441\u043e\u043a \u0443 \u043d\u0430\u0441 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439, \u043c\u044b \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u0422\u0430\u043a\u0436\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0421\u043f\u0438\u0441\u043e\u043a \u0443 \u043d\u0430\u0441 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439, \u0430 \u0432\u043e\u0442 \u043f\u0430\u043c\u044f\u0442\u044c, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435\u0442.<\/p>\n

\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 ListView \u0432 Unity UI Toolkit \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0447\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043d\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0443. \u041e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.<\/p>\n

\n

P.S. \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043a\u043e\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 UnityUxmlGenerator<\/a> \u0438 UnityMvvmToolkit.Generator<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u0431\u0430\u0432\u044f\u0442 \u043d\u0430\u0441 \u043e\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0443\u0447\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d.<\/p>\n<\/blockquote>\n

\n

P.P.S. \u0414\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439<\/a> UnityMvvmToolkit. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b Quick start<\/a>.<\/p>\n<\/blockquote>\n

Reusable Items List<\/h2>\n

\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f ReusableItemsList<\/code>. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u043d\u0451\u043c. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0443\u0434\u0443\u0442: IList<T><\/code>, IList<\/code>, INotifyCollectionChanged<\/code>. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 IList<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c ReusableItemsList<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 itemsSource<\/code> \u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e ListView<\/code>, \u0430 \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0434\u0432\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 BindableListView<\/code> \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 UnityMvvmToolkit.<\/p>\n

public class ReusableItemsList<T> : List<T>, IList<T>, IList, INotifyCollectionChanged {     private int _virtualCount;      public ReusableItemsList(IEnumerable<T> items) : base(items)     {     }      public new T this[int index]     {         get         {             var itemsCount = base.Count;              return itemsCount == 0 ? default : base[index % itemsCount];         }     }      object IList.this[int index]     {         get => this[index];         set => throw new NotImplementedException();     }      public new int Count => base.Count + _virtualCount;      public event NotifyCollectionChangedEventHandler CollectionChanged;      public void AddVirtualItems(int count)     {         _virtualCount += count;         CollectionChanged?.Invoke(this, default);     } }<\/code><\/pre>\n
\u041f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u043d\u043e \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n
\u041f\u0435\u0440\u0432\u043e\u0435 \u2013 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 base[index % itemsCount]<\/code>. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 10 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 20, \u0442\u043e \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 10 \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 0, \u0430 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 15 \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 5. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u0442\u043e \u043f\u043e\u0434\u0432\u043e\u0445 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u0435\u043d. \u041d\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0433\u043e \u0437\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e.<\/p>\n
\u0412\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u2013 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 base.Count + _virtualCount<\/code>. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e ListView<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n
\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u0435\u0442\u043e\u0434 AddVirtualItems<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 CollectionChanged<\/code> \u0443 \u043d\u0430\u0441 NotifyCollectionChangedEventArgs<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 default<\/code>. \u042d\u0442\u043e \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/p>\n
\u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n
Images ListView<\/h2>\n
\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BindableImageListView<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0411\u0430\u0437\u043e\u0432\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 BindableListView<TItemBindingContext, TCollection><\/code>, \u0433\u0434\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0443\u043a\u0430\u0436\u0435\u043c ReusableItemsList<\/code> \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0432 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0430\u0440\u0443 \u043c\u0435\u0442\u043e\u0434\u043e\u0432.<\/p>\n
[BindableElement] public partial class BindableImageListView :     BindableListView<ImagesItemViewModel, ReusableItemsList<ImagesItemViewModel>> {     [BindableProperty(defaultValue: \"MaxBindIndex\")]     private IProperty<int> _maxBindIndexProperty;      protected override void BindItem(VisualElement item, int index, ImagesItemViewModel imagesItem,         IObjectProvider objectProvider)     {         if (_maxBindIndexProperty.Value < index)         {             _maxBindIndexProperty.Value = index;         }          imagesItem.StartImagesLoading(index);         base.BindItem(item, index, imagesItem, objectProvider);     }      protected override void OnItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)     {     } }<\/code><\/pre>\n
\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043c\u0435\u0442\u043e\u0434 BindItem<\/code>. \u0418\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0437\u0434\u0435\u0441\u044c \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f _maxBindIndexProperty<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438. \u041d\u0443 \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 StartImagesLoading<\/code> \u0443 \u043d\u0430\u0448\u0435\u0439 ViewModel'\u0438<\/code> \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 NotifyCollectionChangedEventArgs<\/code> \u0431\u0443\u0434\u0435\u0442 null<\/code>, \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 OnItemsCollectionChanged<\/code>. \u0415\u0433\u043e \u043c\u043e\u0436\u0435\u043c \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e VirtualizationController<\/code> \u043f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f OnScroll<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u043e\u0441\u0443 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n
\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b BindableElement<\/code> \u0438 BindableProperty<\/code> \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<\/blockquote>\n
\nBindableImageListView.Uxml.g.cs<\/summary>\n
\n
\/\/ <auto-generated\/> #pragma warning disable #nullable enable  ...  namespace BindableUIElements {     partial class BindableImageListView     {         [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] [ExcludeFromCodeCoverage] private string BindingMaxBindIndexPath { get; set; }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         public new class UxmlFactory : UxmlFactory<BindableImageListView, UxmlTraits>         {         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         public new class UxmlTraits : BindableListView<ImagesItemViewModel, ReusableItemsList<ImagesItemViewModel>>.UxmlTraits         {             [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]             private readonly UxmlStringAttributeDescription _bindingMaxBindIndexPath = new()                  { name = \"binding-max-bind-index-path\", defaultValue = \"MaxBindIndex\" };              [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]             [ExcludeFromCodeCoverage]             public override void Init(VisualElement visualElement, IUxmlAttributes bag, CreationContext context)             {                 base.Init(visualElement, bag, context);                  var control = (BindableImageListView) visualElement;                 control.BindingMaxBindIndexPath = _bindingMaxBindIndexPath.GetValueFromBag(bag, context);             }         }     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\nBindableImageListView.Bindings.g.cs<\/summary>\n
\n
\/\/ <auto-generated\/> #pragma warning disable #nullable enable  ...  namespace BindableUIElements {     partial class BindableImageListView : IBindableElement     {         [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] private PropertyBindingData? _maxBindIndexBindingData;          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         [ExcludeFromCodeCoverage]         public override void SetBindingContext(IBindingContext context, IObjectProvider objectProvider)         {             BeforeSetBindingContext(context, objectProvider);              base.SetBindingContext(context, objectProvider);              if (string.IsNullOrWhiteSpace(BindingMaxBindIndexPath) == false) { _maxBindIndexBindingData ??= StringExtensions.ToPropertyBindingData(BindingMaxBindIndexPath!); _maxBindIndexProperty = objectProvider.RentProperty<int>(context, _maxBindIndexBindingData!); _maxBindIndexProperty!.ValueChanged += OnMaxBindIndexPropertyValueChanged; }                  AfterSetBindingContext(context, objectProvider);         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         [ExcludeFromCodeCoverage]         public override void ResetBindingContext(IObjectProvider objectProvider)         {             BeforeResetBindingContext(objectProvider);              if (_maxBindIndexProperty != null) { _maxBindIndexProperty!.ValueChanged -= OnMaxBindIndexPropertyValueChanged; objectProvider.ReturnProperty(_maxBindIndexProperty); _maxBindIndexProperty = null; }              base.ResetBindingContext(objectProvider);              AfterResetBindingContext(objectProvider);         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] [ExcludeFromCodeCoverage] private void OnMaxBindIndexPropertyValueChanged(object sender, int value) { OnMaxBindIndexPropertyValueChanged(value); }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void BeforeSetBindingContext(IBindingContext context, IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void AfterSetBindingContext(IBindingContext context, IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void BeforeResetBindingContext(IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void AfterResetBindingContext(IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] partial void OnMaxBindIndexPropertyValueChanged(int value);     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
Image Info<\/h2>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d ImageInfoView.uxml<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 ImagesItemView.uxml<\/code>.<\/p>\n
<ui:UXML xmlns:uitk=\"UnityMvvmToolkit.UITK.BindableUIElements\" ...>     <ui:VisualElement name=\"ElementsContainer\" usage-hints=\"MaskContainer\" class=\"container\">         <BindableImage name=\"BindableImage\" binding-image-path=\"Image\" binding-is-visible-path=\"IsVisible\" usage-hints=\"DynamicTransform\" class=\"image image--animation image--init-position\" \/>         <ui:VisualElement name=\"ImageInfoContainer\" usage-hints=\"GroupTransform\" class=\"image-info__container\">             <uitk:BindableLabel name=\"AuthorLabel\" binding-text-path=\"Author\" class=\"image-info__label image-info__author-label\" \/>             <ui:VisualElement name=\"ImageIdPanel\" style=\"flex-direction: row; align-items: center;\">                 <uitk:BindableLabel name=\"ImageIdTitleLabel\" text=\"Id -\" class=\"image-info__label image-info__id-label\" style=\"margin-right: 0;\" \/>                 <uitk:BindableLabel name=\"ImageIdValueLabel\" binding-text-path=\"Id\" class=\"image-info__label image-info__id-label\" \/>             <\/ui:VisualElement>         <\/ui:VisualElement>     <\/ui:VisualElement> <\/ui:UXML><\/code><\/pre>\n
\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BindableImage<\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 IsVisible<\/code>.<\/p>\n
[BindableElement] public partial class BindableImage : AnimatedImage {     [BindableProperty(\"Image\")]     private IReadOnlyProperty<Texture2D> _imageProperty;      [BindableProperty(\"IsVisible\")]     private IReadOnlyProperty<bool> _isVisibleProperty;      partial void AfterSetBindingContext(IBindingContext context, IObjectProvider objectProvider)     {         SetImage(_imageProperty?.Value);         SetVisibility(_isVisibleProperty?.Value ?? false);     }      partial void AfterResetBindingContext(IObjectProvider objectProvider)     {         SetImage(default);         SetVisibility(false);     }      partial void OnImagePropertyValueChanged(Texture2D value)     {         SetImage(value);     }      partial void OnIsVisiblePropertyValueChanged(bool value)     {         SetVisibility(value);     }      private void SetVisibility(bool isVisible)     {         if (isVisible)         {             AnimateIn();         }         else         {             AnimateOut();         }     } }  [UxmlElement] public partial class AnimatedImage : VisualElement {     private const string ImageInitPositionClassName = \"image--init-position\";      protected void SetImage(Texture2D image)     {         style.backgroundImage = image;     }      protected void AnimateIn()     {         RemoveFromClassList(ImageInitPositionClassName);     }      protected void AnimateOut()     {         AddToClassList(ImageInitPositionClassName);     } }<\/code><\/pre>\n
\nBindableImage.Uxml.g.cs<\/summary>\n
\n
\/\/ <auto-generated\/> #pragma warning disable #nullable enable  ...  namespace BindableUIElements {     partial class BindableImage     {         [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] [ExcludeFromCodeCoverage] private string BindingImagePath { get; set; }  [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] [ExcludeFromCodeCoverage] private string BindingIsVisiblePath { get; set; }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         public new class UxmlFactory : UxmlFactory<BindableImage, UxmlTraits>         {         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         public new class UxmlTraits : AnimatedImage.UxmlTraits         {             [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]             private readonly UxmlStringAttributeDescription _bindingImagePath = new()                  { name = \"binding-image-path\", defaultValue = \"Image\" };  [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]             private readonly UxmlStringAttributeDescription _bindingIsVisiblePath = new()                  { name = \"binding-is-visible-path\", defaultValue = \"IsVisible\" };              [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]             [ExcludeFromCodeCoverage]             public override void Init(VisualElement visualElement, IUxmlAttributes bag, CreationContext context)             {                 base.Init(visualElement, bag, context);                  var control = (BindableImage) visualElement;                 control.BindingImagePath = _bindingImagePath.GetValueFromBag(bag, context); control.BindingIsVisiblePath = _bindingIsVisiblePath.GetValueFromBag(bag, context);             }         }     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\nBindableImage.Bindings.g.cs<\/summary>\n
\n
\/\/ <auto-generated\/> #pragma warning disable #nullable enable  ...  namespace BindableUIElements {     partial class BindableImage : IBindableElement     {         [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] private PropertyBindingData? _imageBindingData;  [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] private PropertyBindingData? _isVisibleBindingData;          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         [ExcludeFromCodeCoverage]         public void SetBindingContext(IBindingContext context, IObjectProvider objectProvider)         {             BeforeSetBindingContext(context, objectProvider);                          if (string.IsNullOrWhiteSpace(BindingImagePath) == false) { _imageBindingData ??= StringExtensions.ToPropertyBindingData(BindingImagePath!); _imageProperty = objectProvider.RentReadOnlyProperty<Texture2D>(context, _imageBindingData!); _imageProperty!.ValueChanged += OnImagePropertyValueChanged; }  if (string.IsNullOrWhiteSpace(BindingIsVisiblePath) == false) { _isVisibleBindingData ??= StringExtensions.ToPropertyBindingData(BindingIsVisiblePath!); _isVisibleProperty = objectProvider.RentReadOnlyProperty<bool>(context, _isVisibleBindingData!); _isVisibleProperty!.ValueChanged += OnIsVisiblePropertyValueChanged; }                  AfterSetBindingContext(context, objectProvider);         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         [ExcludeFromCodeCoverage]         public void ResetBindingContext(IObjectProvider objectProvider)         {             BeforeResetBindingContext(objectProvider);              if (_imageProperty != null) { _imageProperty!.ValueChanged -= OnImagePropertyValueChanged; objectProvider.ReturnReadOnlyProperty(_imageProperty); _imageProperty = null; }  if (_isVisibleProperty != null) { _isVisibleProperty!.ValueChanged -= OnIsVisiblePropertyValueChanged; objectProvider.ReturnReadOnlyProperty(_isVisibleProperty); _isVisibleProperty = null; }                          AfterResetBindingContext(objectProvider);         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] [ExcludeFromCodeCoverage] private void OnImagePropertyValueChanged(object sender, Texture2D value) { OnImagePropertyValueChanged(value); }  [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] [ExcludeFromCodeCoverage] private void OnIsVisiblePropertyValueChanged(object sender, bool value) { OnIsVisiblePropertyValueChanged(value); }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void BeforeSetBindingContext(IBindingContext context, IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void AfterSetBindingContext(IBindingContext context, IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void BeforeResetBindingContext(IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void AfterResetBindingContext(IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] partial void OnImagePropertyValueChanged(Texture2D value);  [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] partial void OnIsVisiblePropertyValueChanged(bool value);     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 \u0441\u0442\u0438\u043b\u0435\u0439 image-info-view.uss<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
...  .image--animation {     transition-property: translate;     transition-duration: 1250ms;     transition-timing-function: ease-out-cubic; }  .image--init-position {     translate: 0 256px; }<\/code><\/pre>\n
\u041c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f ImageInfoView.uxml<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
public partial class ImageInfoViewModel : IImageInfoModel, IBindingContext {     private readonly Texture2D _invalidTexture = Texture2D.grayTexture;      [WithObservableBackingField]     public string Id     {         get => _id.Value;         set => _id.Value = value;     }      [WithObservableBackingField]     public string Author     {         get => _author.Value;         set => _author.Value = value;     }      [WithObservableBackingField]     public bool IsVisible     {         get => _isVisible.Value;         set => _isVisible.Value = value;     }      [WithObservableBackingField]     public Texture2D Image     {         get => _image.Value;         set         {             if (_image.Value != _invalidTexture)             {                 Object.Destroy(_image.Value);             }              _image.Value = value;         }     }      public void ResetWithId(string imageId)     {         Id = imageId;         Author = default;         IsVisible = default;          ReleaseImage();     }      public void SetInvalidState(string message)     {         Author = message;         Image = _invalidTexture;         IsVisible = true;     }      public void Dispose()     {         ReleaseImage();     }      private void ReleaseImage()     {         Image = null;     } }<\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0435\u0442\u0442\u0435\u0440 \u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 Image<\/code>. \u0414\u043b\u044f \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0439 \u0438\u0437 \u0441\u0435\u0442\u0438 \u043d\u0435\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c\u044b\u0439 \u0440\u0435\u0441\u0443\u0440\u0441.<\/p>\n
Images Item<\/h2>\n
\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 ImagesItemView.uxml<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n
<ui:UXML ...>     <ui:Template name=\"ImageInfoView\" src=\"...\" \/>     <ui:VisualElement name=\"ImagesContainer\" usage-hints=\"GroupTransform\" class=\"image-item\">         <ImageInfoBindingContextProvider binding-context-path=\"LeftImageInfo\" class=\"image-item__image-container\">             <ui:Instance template=\"ImageInfoView\" name=\"LeftImageInfoContainer\" \/>         <\/ImageInfoBindingContextProvider>         <ImageInfoBindingContextProvider binding-context-path=\"RightImageInfo\" class=\"image-item__image-container\">             <ui:Instance template=\"ImageInfoView\" name=\"RightImageInfoContainer\" \/>         <\/ImageInfoBindingContextProvider>     <\/ui:VisualElement> <\/ui:UXML><\/code><\/pre>\n
\u0417\u0434\u0435\u0441\u044c \u0441\u0442\u043e\u0438\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 ImageInfoBindingContextProvider<\/code>. \u0418\u0437 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0435\u0433\u043e \u0437\u0430\u0434\u0430\u0447\u0430 \u2013 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 BindingContext<\/code> \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u0442\u043d\u043e\u0432. \u0422.\u0435. \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 LeftImageInfoContainer<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 BindingContext'\u0430<\/code> \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e LeftImageInfo<\/code>, \u0430 \u0434\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 RightImageInfoContainer<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e RightImageInfo<\/code>.<\/p>\n
\u041d\u0438\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 ImageInfoBindingContextProvider<\/code>:<\/p>\n
[UxmlElement] public partial class ImageInfoBindingContextProvider : BindingContextProvider<ImageInfoViewModel> { }<\/code><\/pre>\n
\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BindingContextProvider<\/code> \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439, \u043d\u043e \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0430\u043b\u043b\u043e\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u043b\u044c\u043a\u043e PropertyCastWrapper'\u043e\u0432<\/code>, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0443 \u043d\u0430\u0441 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u0414\u0430, \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c UnityMvvmToolkit \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0443\u043b\u044b, \u0438 \u044d\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438\u0441\u044c \u0431\u044b \u0435\u0434\u0438\u043d\u043e\u0436\u0434\u044b \u0438 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u0441\u044c. \u041d\u043e \u0437\u0430\u0447\u0435\u043c \u0430\u043b\u043b\u043e\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u0430\u043b\u043b\u043e\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c?<\/p>\n
\u041c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f ImagesItemView.uxml<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n
public class ImagesItemViewModel : ICollectionItem, IDisposable {     private readonly IImagesItemModel _model;      ...      public ImagesItemViewModel(int id, IImagesItemModel model)     {         ...          LeftImageInfo = new ReadOnlyProperty((ImageInfoViewModel) model.LeftImageInfo);         RightImageInfo = new ReadOnlyProperty((ImageInfoViewModel) model.RightImageInfo);     }      public IReadOnlyProperty<ImageInfoViewModel> LeftImageInfo { get; }     public IReadOnlyProperty<ImageInfoViewModel> RightImageInfo { get; }      public void StartImagesLoading(int itemIndex)     {         if (TryUpdateItemIndex(itemIndex))         {             StopPreviousImagesLoading();              if (_isLoading == false)             {                 StartImagesLoadingAsync(itemIndex).Forget();             }         }     }      private bool TryUpdateItemIndex(int itemIndex)     {         if (_itemIndex == itemIndex)         {             return false;         }          _itemIndex = itemIndex;         return true;     }      private void StopPreviousImagesLoading()     {         _cancellationTokenSource?.Cancel();     }      private async UniTaskVoid StartImagesLoadingAsync(int itemIndex)     {         _isLoading = true;          while (_isLoading)         {             _cancellationTokenSource = new CancellationTokenSource();              try             {                 await _model                     .Configure(itemIndex)                     .LoadImagesAsync(_cancellationTokenSource.Token)                     .SuppressCancellationThrow();                  if (IsItemIndexValid(itemIndex, out var newItemIndex))                 {                     _isLoading = false;                 }                 else                 {                     itemIndex = newItemIndex;                 }             }             finally             {                 _cancellationTokenSource?.Dispose();                 _cancellationTokenSource = null;             }         }     }      private bool IsItemIndexValid(int itemIndex, out int newItemIndex)     {         newItemIndex = _itemIndex;         return itemIndex == _itemIndex && _isDisposed == false;     } }<\/code><\/pre>\n
\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0443\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f. \u0412 \u043c\u0435\u0442\u043e\u0434\u0435 StartImagesLoading<\/code> \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f \u043b\u0438 \u0438\u043d\u0434\u0435\u043a\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435. \u041f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0438\u043d\u0434\u0435\u043a\u0441 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u0438 \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043c\u044b \u0434\u0435\u0440\u0436\u0438\u043c \u0435\u0451 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u043e\u0439 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0438\u043d\u0434\u0435\u043a\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0434\u043b\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0451\u0442 \u0441 \u0442\u0435\u043a\u0443\u0449\u0438\u043c \u0438\u043d\u0434\u0435\u043a\u0441\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u0437\u043e\u0432\u0435\u0442\u0441\u044f Dispose<\/code> \u0443 \u043a\u043b\u0430\u0441\u0441\u0430. \u0422.\u0435. \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0447\u0430\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 5 \u0438 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0443 \u043d\u0430\u0441 \u0438\u043d\u0434\u0435\u043a\u0441 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u0441\u0442\u0430\u043b\u0441\u044f 5, \u0442\u043e \u043c\u044b \u0432\u044b\u0445\u043e\u0434\u0438\u043c \u0438\u0437 \u0446\u0438\u043a\u043b\u0430 while<\/code>, \u0438\u043d\u0430\u0447\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0430 \u0435\u0441\u043b\u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, _isDisposed == false<\/code>.<\/p>\n
\nImagesItemModel<\/summary>\n
\n
public class ImagesItemModel : IImagesItemModel {     ...      public IImageInfoModel LeftImageInfo { get; private set; }     public IImageInfoModel RightImageInfo { get; private set; }      public IImagesItemModel Configure(int itemIndex)     {         var imagesId = _imagesIdProvider.GetImagesId(itemIndex);          LeftImageInfo.ResetWithId(imagesId.LeftImageId);         RightImageInfo.ResetWithId(imagesId.RightImageId);                  return this;     }      public async UniTask LoadImagesAsync(CancellationToken cancellationToken)     {         await UniTask.WhenAll(             PopulateImageInfoAsync(LeftImageInfo, cancellationToken),             PopulateImageInfoAsync(RightImageInfo, cancellationToken));     }      private async UniTask PopulateImageInfoAsync(IImageInfoModel imageInfo, CancellationToken cancellationToken)     {         var result = await _imageDataProvider.DownloadImageInfoAsync(imageInfo.Id, cancellationToken);          if (result.IsFailure)         {             imageInfo.SetInvalidState(result.Error);             return;         }          JsonConvert.PopulateObject(result.Value.InfoJson, imageInfo);          imageInfo.Image = result.Value.Image;         imageInfo.IsVisible = true;     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\nImageDataProvider<\/summary>\n
\n
public sealed class ImageDataProvider : IImageDataProvider, IDisposable {     ...      public async UniTask<Result<(string InfoJson, Texture2D Image)>> DownloadImageInfoAsync(string imageId,         CancellationToken cancellationToken = default)     {         try         {             var urls = GetImageUrls(imageId);              var infoJson = await DownloadInfoAsync(urls.InfoUrl, cancellationToken);             if (infoJson is null)             {                 return Result.Failure<(string, Texture2D)>(ImageInfoNotFound);             }              var image = await DownloadImageAsync(urls.ImageUrl, cancellationToken);              return image                 ? Result.Success<(string, Texture2D)>((infoJson, image))                 : Result.Failure<(string, Texture2D)>(ImageNotFound);         }         catch (UnityWebRequestException exception)         {             return Result.Failure<(string, Texture2D)>(exception.ResponseCode == 404                 ? ImageNotFound                 : exception.Message);         }     }      private static async UniTask<string> DownloadInfoAsync(string infoUrl, CancellationToken cancellationToken)     {         using var unityWebRequest = UnityWebRequest.Get(infoUrl);          await unityWebRequest             .SendWebRequest()             .WithCancellation(cancellationToken);          return unityWebRequest.result == UnityWebRequest.Result.Success             ? Encoding.UTF8.GetString(unityWebRequest.downloadHandler.data)             : null;     }      private static async UniTask<Texture2D> DownloadImageAsync(string imageUrl, CancellationToken cancellationToken)     {         using var unityWebRequest = UnityWebRequestTexture.GetTexture(imageUrl);          await unityWebRequest             .SendWebRequest()             .WithCancellation(cancellationToken);          return unityWebRequest.result == UnityWebRequest.Result.Success             ? DownloadHandlerTexture.GetContent(unityWebRequest)             : null;     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
Images Viewer<\/h2>\n
\u041d\u0443 \u0438, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f ImagesViewerViewModel<\/code>.<\/p>\n
public class ImagesViewerViewModel : IBindingContext, IDisposable {     private const int MinItemsThreshold = 5;     private const int VirtualItemsIncrement = 5;      public ImagesViewerViewModel(IImagesViewerModel model)     {         if (model.ImagesItems.Count < MinItemsThreshold)         {             throw new InvalidOperationException(                 $\"The number of reusable elements cannot be less than {MinItemsThreshold}.\");         }          var reusableImageItems =             new ReusableItemsList<ImagesItemViewModel>(GetImagesItemViewModels(model.ImagesItems));          ImageItems = new ReadOnlyProperty<ReusableItemsList<ImagesItemViewModel>>(reusableImageItems);          MaxBindIndex = new Property<int>();         MaxBindIndex.ValueChanged += OnMaxBindIndexChanged;     }      public IProperty<int> MaxBindIndex { get; }     public IReadOnlyProperty<ReusableItemsList<ImagesItemViewModel>> ImageItems { get; }      public void Dispose()     {         foreach (var imagesItemViewModel in ImageItems.Value)         {             imagesItemViewModel.Dispose();         }          ImageItems.Value.Clear();         MaxBindIndex.ValueChanged -= OnMaxBindIndexChanged;     }      private void OnMaxBindIndexChanged(object sender, int maxIndex)     {         if (maxIndex == ImageItems.Value.Count - 1)         {             ImageItems.Value.AddVirtualItems(VirtualItemsIncrement);         }     }      private static IEnumerable<ImagesItemViewModel> GetImagesItemViewModels(         IReadOnlyList<IImagesItemModel> imagesItems)     {         for (var i = 0; i < imagesItems.Count; i++)         {             yield return new ImagesItemViewModel(i, imagesItems[i]);         }     } }<\/code><\/pre>\n
\u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 OnMaxBindIndexChanged<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0434\u043e\u043b\u0438\u0441\u0442\u0430\u043b \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0449\u0451 5 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e.<\/p>\n
\u041c\u043e\u0434\u0435\u043b\u044c ImagesViewerModel<\/code>:<\/p>\n
public sealed class ImagesViewerModel : IImagesViewerModel, IDisposable {     private const int InMemoryCacheItemsCount = 5;      ...      public IReadOnlyList<IImagesItemModel> ImagesItems => _imagesItems;      private void CreateImagesItems(IImagesIdProvider imagesIdProvider, IImageDataProvider imageDataProvider)     {         _imagesItems = new IImagesItemModel[InMemoryCacheItemsCount];          for (var i = 0; i < InMemoryCacheItemsCount; i++)         {             _imagesItems[i] = new ImagesItemModel(imagesIdProvider, imageDataProvider);         }     } }<\/code><\/pre>\n
\u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430 InMemoryCacheItemsCount<\/code> \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043f\u0438\u0441\u043a\u0435 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e 5 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0443 \u043d\u0430\u0441 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e 10 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u043e 2 \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430.<\/p>\n
\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c ImagesViewerView.cs<\/code> \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 DocumentView<ImagesViewerViewModel><\/code>, \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c ImagesItemView.uxml<\/code> \u0432 \u043f\u043e\u043b\u0435 _imagesItemTemplate<\/code>, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043d\u044f\u043b, \u043a\u0430\u043a\u043e\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0438\u043f\u0430 ImagesItemViewModel<\/code>.<\/p>\n
public class ImagesViewerView : DocumentView<ImagesViewerViewModel> {     [SerializeField] private VisualTreeAsset _imagesItemTemplate;      ...      protected override IReadOnlyDictionary<Type, object> GetCollectionItemTemplates()     {         return new Dictionary<Type, object>         {             { typeof(ImagesItemViewModel), _imagesItemTemplate }         };     } }<\/code><\/pre>\n
DocumentView<TBindingContext><\/code> \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 View<\/code> \u0438 ViewModel<\/code>.<\/p>\n
\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0448\u0443 View ImagesViewerView.uxml<\/code> \u0438 \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0443 BindableImageListView<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 binding-items-source-path<\/code> \u0443\u043a\u0430\u0437\u0430\u0442\u044c ImageItems<\/code>.<\/p>\n
<ui:UXML xmlns:uitk=\"UnityMvvmToolkit.UITK.BindableUIElements\" ...>     <Style src=\"project:\/\/database\/Assets\/UI%20Toolkit\/Styles\/root.uss?fileID=7433441132597879392&amp;guid=e3fa7fbf0e9b3fb48916d2e77209f1ca&amp;type=3#root\" \/>     <Style src=\"project:\/\/database\/Assets\/UI%20Toolkit\/Styles\/main-view.uss?fileID=7433441132597879392&amp;guid=0532dc2e51322554a9b731042cfb65ae&amp;type=3#main-view\" \/>     <SafeAreaContainer usage-hints=\"GroupTransform\">         <ui:VisualElement name=\"Header\" usage-hints=\"GroupTransform\" class=\"main-view__header\">             <uitk:BindableLabel text=\"Images\" class=\"main-view__header-label main-view__header-label--left\" \/>             <uitk:BindableLabel text=\" Viewer\" class=\"main-view__header-label main-view__header-label--right\" \/>         <\/ui:VisualElement>         <ui:VisualElement name=\"Content\" usage-hints=\"GroupTransform\" class=\"main-view__content\">             <BindableImageListView name=\"ImagesListView\" binding-items-source-path=\"ImageItems\" \/>         <\/ui:VisualElement>     <\/SafeAreaContainer> <\/ui:UXML><\/code><\/pre>\n
\n
P.S. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u043c\u044b \u044f\u0432\u043d\u043e \u043d\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c MaxBindIndex<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 binding-max-bind-index-path<\/code> \u0443 \u043d\u0430\u0448\u0435\u0433\u043e BindableImageListView<\/code>. \u0412\u0441\u0451 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0440\u0430\u0437\u0443 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 _maxBindIndexProperty<\/code> \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0435\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u0437 ViewModel<\/code>.<\/p>\n<\/blockquote>\n
\u041d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u043e. \u0421\u043a\u0430\u0447\u0430\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u043b\u044f Android \u043c\u043e\u0436\u043d\u043e \u0437\u0434\u0435\u0441\u044c<\/a>, \u0430 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c \u0438 \u043a UnityMvvmToolkit.Generator \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n
\u0410 \u043a\u0430\u043a\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0412\u044b \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430? MVC, MVP, \u0438\u043b\u0438 MVVM?<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/746782\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 ListView c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438.<\/p>\n
<\/div>\n
\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Unity UI Toolkit<\/a> \u0432 \u043f\u0430\u0440\u0435 \u0441 UnityMvvmToolkit<\/a>. \u042f \u0443\u0436\u0435 \u043f\u0438\u0441\u0430\u043b \u043f\u0440\u043e UnityMvvmToolkit \u0441\u0442\u0430\u0442\u044c\u044e \u0432\u043e\u0442 \u0437\u0434\u0435\u0441\u044c<\/a>. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 API \u043f\u0440\u0438\u0442\u0435\u0440\u043f\u0435\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u0430 \u0442\u043e\u0447\u043d\u0435\u0435, \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043d \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043d\u0430 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u043b\u044e\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0435\u0441\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0434\u0430\u0439\u0442\u0435 \u0437\u043d\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445, \u043d\u0430\u043f\u0438\u0448\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0451\u043d\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e \u043d\u0435\u0439.<\/p>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0441\u043f\u0438\u0441\u043e\u043a \u0443 \u043d\u0430\u0441 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439, \u043c\u044b \u043f\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u0422\u0430\u043a\u0436\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0445\u0441\u044f \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0421\u043f\u0438\u0441\u043e\u043a \u0443 \u043d\u0430\u0441 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439, \u0430 \u0432\u043e\u0442 \u043f\u0430\u043c\u044f\u0442\u044c, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0435\u0442.<\/p>\n
\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 ListView \u0432 Unity UI Toolkit \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438, \u0447\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043d\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0443. \u041e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0441\u043f\u0438\u0441\u043a\u0435.<\/p>\n
\n
P.S. \u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u043d\u0438\u0436\u0435 \u043a\u043e\u0434\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 UnityUxmlGenerator<\/a> \u0438 UnityMvvmToolkit.Generator<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u0431\u0430\u0432\u044f\u0442 \u043d\u0430\u0441 \u043e\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0443\u0447\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0421\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d.<\/p>\n<\/blockquote>\n
\n
P.P.S. \u0414\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439<\/a> UnityMvvmToolkit. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b Quick start<\/a>.<\/p>\n<\/blockquote>\n
Reusable Items List<\/h2>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f ReusableItemsList<\/code>. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0445\u0440\u0430\u043d\u044f\u0449\u0438\u0435\u0441\u044f \u0432 \u043d\u0451\u043c. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0443\u0434\u0443\u0442: IList<T><\/code>, IList<\/code>, INotifyCollectionChanged<\/code>. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 IList<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430, \u0447\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c ReusableItemsList<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 itemsSource<\/code> \u0443 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0433\u043e ListView<\/code>, \u0430 \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0434\u0432\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 BindableListView<\/code> \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 UnityMvvmToolkit.<\/p>\n
public class ReusableItemsList<T> : List<T>, IList<T>, IList, INotifyCollectionChanged {     private int _virtualCount;      public ReusableItemsList(IEnumerable<T> items) : base(items)     {     }      public new T this[int index]     {         get         {             var itemsCount = base.Count;              return itemsCount == 0 ? default : base[index % itemsCount];         }     }      object IList.this[int index]     {         get => this[index];         set => throw new NotImplementedException();     }      public new int Count => base.Count + _virtualCount;      public event NotifyCollectionChangedEventHandler CollectionChanged;      public void AddVirtualItems(int count)     {         _virtualCount += count;         CollectionChanged?.Invoke(this, default);     } }<\/code><\/pre>\n
\u041f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a, \u043d\u043e \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n
\u041f\u0435\u0440\u0432\u043e\u0435 \u2013 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 base[index % itemsCount]<\/code>. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438. \u0415\u0441\u043b\u0438 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 10 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0430 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 20, \u0442\u043e \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 10 \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 0, \u0430 \u043f\u043e \u0438\u043d\u0434\u0435\u043a\u0441\u0443 15 \u0432\u0435\u0440\u043d\u0451\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 5. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0435\u0441\u043b\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435, \u0442\u043e \u043f\u043e\u0434\u0432\u043e\u0445 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u0435\u043d. \u041d\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0433\u043e \u0437\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e.<\/p>\n
\u0412\u0442\u043e\u0440\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u2013 \u044d\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0434\u0441\u0447\u0435\u0442\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 base.Count + _virtualCount<\/code>. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e ListView<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043e\u0441\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n
\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u0435\u0442\u043e\u0434 AddVirtualItems<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0438 CollectionChanged<\/code> \u0443 \u043d\u0430\u0441 NotifyCollectionChangedEventArgs<\/code> \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 default<\/code>. \u042d\u0442\u043e \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<\/p>\n
\u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n
Images ListView<\/h2>\n
\u0414\u0430\u043b\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 BindableImageListView<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0411\u0430\u0437\u043e\u0432\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 BindableListView<TItemBindingContext, TCollection><\/code>, \u0433\u0434\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0443\u043a\u0430\u0436\u0435\u043c ReusableItemsList<\/code> \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0432 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0430\u0440\u0443 \u043c\u0435\u0442\u043e\u0434\u043e\u0432.<\/p>\n
[BindableElement] public partial class BindableImageListView :     BindableListView<ImagesItemViewModel, ReusableItemsList<ImagesItemViewModel>> {     [BindableProperty(defaultValue: \"MaxBindIndex\")]     private IProperty<int> _maxBindIndexProperty;      protected override void BindItem(VisualElement item, int index, ImagesItemViewModel imagesItem,         IObjectProvider objectProvider)     {         if (_maxBindIndexProperty.Value < index)         {             _maxBindIndexProperty.Value = index;         }          imagesItem.StartImagesLoading(index);         base.BindItem(item, index, imagesItem, objectProvider);     }      protected override void OnItemsCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)     {     } }<\/code><\/pre>\n
\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043c\u0435\u0442\u043e\u0434 BindItem<\/code>. \u0418\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0437\u0434\u0435\u0441\u044c \u2013 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044f _maxBindIndexProperty<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438. \u041d\u0443 \u0438, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430 StartImagesLoading<\/code> \u0443 \u043d\u0430\u0448\u0435\u0439 ViewModel'\u0438<\/code> \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n
\u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 NotifyCollectionChangedEventArgs<\/code> \u0431\u0443\u0434\u0435\u0442 null<\/code>, \u043d\u0430\u043c \u0442\u0430\u043a\u0436\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434 OnItemsCollectionChanged<\/code>. \u0415\u0433\u043e \u043c\u043e\u0436\u0435\u043c \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0443\u0441\u0442\u044b\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e VirtualizationController<\/code> \u043f\u0440\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f OnScroll<\/code> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043f\u043e\u043b\u043e\u0441\u0443 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438.<\/p>\n
\n
\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b BindableElement<\/code> \u0438 BindableProperty<\/code> \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n<\/blockquote>\n
\nBindableImageListView.Uxml.g.cs<\/summary>\n
\n
\/\/ <auto-generated\/> #pragma warning disable #nullable enable  ...  namespace BindableUIElements {     partial class BindableImageListView     {         [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] [ExcludeFromCodeCoverage] private string BindingMaxBindIndexPath { get; set; }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         public new class UxmlFactory : UxmlFactory<BindableImageListView, UxmlTraits>         {         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         public new class UxmlTraits : BindableListView<ImagesItemViewModel, ReusableItemsList<ImagesItemViewModel>>.UxmlTraits         {             [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]             private readonly UxmlStringAttributeDescription _bindingMaxBindIndexPath = new()                  { name = \"binding-max-bind-index-path\", defaultValue = \"MaxBindIndex\" };              [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]             [ExcludeFromCodeCoverage]             public override void Init(VisualElement visualElement, IUxmlAttributes bag, CreationContext context)             {                 base.Init(visualElement, bag, context);                  var control = (BindableImageListView) visualElement;                 control.BindingMaxBindIndexPath = _bindingMaxBindIndexPath.GetValueFromBag(bag, context);             }         }     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
\nBindableImageListView.Bindings.g.cs<\/summary>\n
\n
\/\/ <auto-generated\/> #pragma warning disable #nullable enable  ...  namespace BindableUIElements {     partial class BindableImageListView : IBindableElement     {         [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] private PropertyBindingData? _maxBindIndexBindingData;          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         [ExcludeFromCodeCoverage]         public override void SetBindingContext(IBindingContext context, IObjectProvider objectProvider)         {             BeforeSetBindingContext(context, objectProvider);              base.SetBindingContext(context, objectProvider);              if (string.IsNullOrWhiteSpace(BindingMaxBindIndexPath) == false) { _maxBindIndexBindingData ??= StringExtensions.ToPropertyBindingData(BindingMaxBindIndexPath!); _maxBindIndexProperty = objectProvider.RentProperty<int>(context, _maxBindIndexBindingData!); _maxBindIndexProperty!.ValueChanged += OnMaxBindIndexPropertyValueChanged; }                  AfterSetBindingContext(context, objectProvider);         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         [ExcludeFromCodeCoverage]         public override void ResetBindingContext(IObjectProvider objectProvider)         {             BeforeResetBindingContext(objectProvider);              if (_maxBindIndexProperty != null) { _maxBindIndexProperty!.ValueChanged -= OnMaxBindIndexPropertyValueChanged; objectProvider.ReturnProperty(_maxBindIndexProperty); _maxBindIndexProperty = null; }              base.ResetBindingContext(objectProvider);              AfterResetBindingContext(objectProvider);         }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] [ExcludeFromCodeCoverage] private void OnMaxBindIndexPropertyValueChanged(object sender, int value) { OnMaxBindIndexPropertyValueChanged(value); }          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void BeforeSetBindingContext(IBindingContext context, IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void AfterSetBindingContext(IBindingContext context, IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void BeforeResetBindingContext(IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")]         partial void AfterResetBindingContext(IObjectProvider objectProvider);          [GeneratedCodeAttribute(\"UnityMvvmToolkit.Generator\", \"1.0.0.0\")] partial void OnMaxBindIndexPropertyValueChanged(int value);     } }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
Image Info<\/h2>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d ImageInfoView.uxml<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u043e\u043c \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441\u043f\u0438\u0441\u043a\u0430 ImagesItemView.uxml<\/code>.<\/p>\n
<ui:UXML xmlns:uitk=\"UnityMvvmToolkit.UITK.BindableUIElements\" ...>     <ui:VisualElement<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-405202","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/405202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=405202"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/405202\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=405202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=405202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=405202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}