Trendlist: [New post] Flutter IOS Style Scroll View và Refresh Indicator

Tuesday, August 31, 2021

[New post] Flutter IOS Style Scroll View và Refresh Indicator

Respond to this post by replying above this line

Flutter IOS Style Scroll View và Refresh Indicator

by SuperTung

Hành vi xem cuộn

Thông thường, việc thiết lập chế độ xem lại / cuộn là yêu cầu nhiều dòng mã hơn trong phát triển Java android. Khung làm việc của Flutter thực sự dễ dàng cho các nhà phát triển bởi vì trong Flutter hầu hết mọi thứ đều bao gồm các widget và chúng ta có thể dễ dàng thêm chế độ xem cuộn vào màn hình của mình hoặc vào widget con. Flutter có một số chế độ xem cuộn nhưng hoạt động khá giống nhau. Trong bài viết này tôi sẽ nói về chế độ xem cuộn cơ bản nhất, đó là SingleChildScrollView.

 class FlutterScrollView extends StatelessWidget {  @override  Widget build(BuildContext context) {     return Container(        child: SingleChildScrollView(          child: Column(             children: [                Text("text1");                Text("text2");                Text("text3");                Text("text4");             ],)      ),     );  }}

Chúng ta có thể đơn giản sử dụng nó như một widget trong giàn giáo hoặc bất kỳ nơi nào khác trong flutter. Thông thường, chúng tôi đã thêm chế độ xem cuộn vào bố cục cột vì theo mặc định, chế độ xem cuộn là dọc. Một ví dụ khác là Nếu chúng ta thêm số lượng trường văn bản, chúng ta phải bao bọc tất cả các tiện ích của mình trong dạng xem SingleChildScroll vì khi chúng ta nhấp vào các trường văn bản, bàn phím sẽ bật lên và che các trường văn bản dưới cùng. Trong trường hợp đó, màn hình sẽ có chế độ xem có thể cuộn.

Như đã đề cập trước đây, Trong quá trình phát triển Android Flagship, rất dễ dàng thực hiện chế độ xem cuộn nhưng chế độ xem cuộn mặc định, đó là ClampingScrollPhysics có một số hành vi kỳ lạ, Danh sách dừng lại ở cuối và đưa ra hiệu ứng chỉ ra điều đó.

Ở cuối chế độ xem cuộn, nó sẽ cho biết như thế này. Loại vật lý khác là BouncingScrollPhysics, được trả lại danh sách khi danh sách kết thúc. Một hiệu ứng tương tự được sử dụng trên iOS.

Cá nhân tôi thích kiểu xem cuộn này hơn và việc thay đổi kiểu vật lý thực sự dễ dàng. SingleChildScrollView có thuộc tính được gọi là vật lý và chúng ta chỉ có thể thay đổi thuộc tính mặc định. Điều này cũng có sẵn cho các chế độ xem cuộn khác.

 Container(        child: SingleChildScrollView(             physics: BouncingScrollPhysics(),             child: Column(

Làm mới indicator

Nếu bạn là một người dùng điện thoại thông minh chắc chắn bạn sẽ biết indicator làm mới này. Nếu bạn trượt lên nhiều hơn hoặc trượt xuống nhiều hơn, indicator này sẽ xuất hiện và một số mã sẽ thực thi, có thể tải lại trang hoặc bất kỳ thứ gì khác. Trong nháy mắt, thêm một indicator làm mới là một việc dễ dàng. Trong phần này sẽ hướng dẫn cách thêm indicator làm mới mặc định là một widget kiểu android cơ bản.

 @override Widget build(BuildContext context) {   return Container(     child: RefreshIndicator(       onRefresh: () {         // this required Future<void> Function         return Future.value(true);       },       child: SingleChildScrollView(         child: Column(           children: [             Text('test1'),             Text('test1'),             Text('test3'),           ],         ),       ),     ),); }

Như bạn có thể thấy, chúng tôi có thể dễ dàng thiết lập tiện ích được tạo sẵn này và cũng có một số cấu hình để tùy chỉnh điều này.

Như bạn có thể thấy, đây là tiện ích indicator làm mới cơ bản và chúng tôi có thể tùy chỉnh và cải thiện điều này. Điều quan trọng là sự rung động cũng cung cấp một indicator làm mới thực sự đẹp mắt khác nhưng nó đi kèm với một số hạn chế. Trong các widget của Cupertino có một CupertinoSliverRefreshControl. Đầu tiên chúng ta phải nhập gói Cupertino. Thông thường, các widget của Cupertino được sử dụng trong các ứng dụng iOS và để phát triển Android, chúng tôi chỉ nhập tệp material.dart. Đúng như tên gọi, đây là một widget loại Silver. Trong CustomScrollView có một con màu Silverlà danh sách các con. Chúng tôi phải sử dụng tiện ích làm mới Cupertino trong danh sách này. Loại Silver này cũng có một thanh ứng dụng Silver, danh sách Silvervà nhiều loại. Bạn có thể đọc thêm về Silver tại đây Scroll Views Full

Một điều khác là thông thường chúng tôi không sử dụng các widget Cupertino trong Android, nhưng bạn có thể làm điều đó trong trường hợp này. Để sử dụng tiện ích này, chúng ta phải thay đổi thuộc tính vật lý trong CustomScrollView thành BouncingScrollPhysics.

 import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart';  @override Widget build(BuildContext context) {   return Container(     child: CustomScrollView(       physics: BouncingScrollPhysics(),       slivers: [         CupertinoSliverRefreshControl(           onRefresh: () {             // this required Future<void> Function             return Future.value(true);           },         ),         SliverList(           delegate: SliverChildBuilderDelegate(                 (context, index) {},             childCount: 1,           ),         ),       ],     ),); }

Bạn có thể thấy rằng chúng tôi phải sử dụng chế độ xem cuộn tùy chỉnh và triển khai SilverChildBuilderDelegate để tạo chế độ xem danh sách hỗ trợ bạc và sau đó bạn có thể triển khai tiện ích làm mới Cupertino này. Thông tin chi tiết tham khảo bài viết này