Hoạt ảnh Hiệu ứng cuộn Flutter Row

Question

Dự án hiện tại của tôi có một hàng có thể cuộn hoạt động tốt, nhưng tôi không thể tìm ra cách tạo một loại cuộn tĩnh nào đó, trong đó khi bạn cuộn đến một mục, mục đó sẽ tự động được căn giữa.

Đây là những gì tôi hiện có:

Khi các thẻ được cuộn, chúng sẽ ở vị trí khi cuộn kết thúc:

Hiệu ứng mà tôi muốn đạt được là thẻ tự căn chỉnh ở giữa khi cuộn sang thẻ tiếp theo.

Có một widget nào thực sự hoạt động như vậy không?

Answer 1

Thử cái này,

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
 runApp(MyApp()); 
}

class MyApp extends StatelessWidget {

final List<String> images = ["Me", "You", "Foo", "Baa"];

final PageController controller = PageController(viewportFraction:0.8);

@override
Widget build(BuildContext context) {
return MaterialApp(
  theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
  debugShowCheckedModeBanner: false,
  home: Scaffold(
    body: PageView.builder(
      controller: controller,
      itemCount: images.length,
      itemBuilder: (context,index){
        return Container(
          margin: EdgeInsets.all(16),
          child: Center(child:Text(images[index])),
          color: Colors.grey.shade200
        );

      }
    ),
   ),
  );
 }
 }

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Text('Hello, World!', style: Theme.of(context).textTheme.headline4);
} 
}

Answer 2

Giải pháp rất đơn giản:

 Padding(
      padding: const EdgeInsets.symmetric(vertical: 80),
      child: Container(
        child: PageView(
          controller: controller,
          scrollDirection: Axis.horizontal,
          pageSnapping: true,
          physics: BouncingScrollPhysics(),
          children: [CardMovie(), CardMovie(), CardMovie()],
        ),
      ),
    )

sử dụng tiện ích PageView và tạo phần đệm ở trên cùng vì chiều cao của tiện ích là toàn màn hình.