如何在 Flutter 中選擇小部件時按比例放大

Question

我有一個具有pageView.builder的應用程序，它包含 5 個stack小部件

如何放大用戶選擇的小部件，例如：

如果用戶滾動到小部件 3，小部件 1 和 2 變得小於小部件 3，如果他滾動到小部件 5 或 2，則相同

（中間會比兩邊的widget大）

我的代碼：

    Widget build(BuildContext context) {
    // ignore: sized_box_for_whitespace
    return Container(
      height: 320,
      child: PageView.builder(
          controller: pageController,
          itemCount: 5,
          itemBuilder: (context, position) {
            return _bulidPageItem(position);
          }),
    );
  }

  Widget _bulidPageItem(int index) {

//------------------------------------------------------------------------------
// Slide image 🚩
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Container(
          margin: const EdgeInsets.only(left: 5, right: 5),
          height: 220,
          width: 350,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            color: index.isEven
                ? const Color(0xFFffd28d)
                : const Color(0xFF89dad0),
            image: const DecorationImage(
                image: AssetImage('images/chineseFood.jpg'), fit: BoxFit.cover),
          ),
        ),
//------------------------------------------------------------------------------
// Slide Information 🚩
        Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            margin: const EdgeInsets.only(left: 30, right: 30, bottom: 15),
            height: 130,
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                    color: Colors.grey.withOpacity(0.3),
                    blurRadius: 6,
                    spreadRadius: 0.7,
                    offset: const Offset(1, 4))
              ],
              borderRadius: BorderRadius.circular(25),
              color: Colors.white,
            ),
//------------------------------------------------
// Slider title
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const BigText(
                    text: 'Chinese side',
                  ),
//----------------------------------------------
// Slider Rating
                  const SizedBox(height: 10),
                  Row(
                    children: [
                      Wrap(
                        children: List.generate(
                          5,
                          (index) => const Icon(Icons.star,
                              color: AppColor.mainColor, size: 12),
                        ),
                      ),
                      const SizedBox(width: 10),
                      SmallText(text: 4.5.toString()),
                      const SizedBox(width: 10),
                      const SmallText(text: '1287 comments'),
                    ],
                  ),
                  const SizedBox(height: 20),
//----------------------------------------------
// Slider Icons
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const [
                      SliderIcons(
                          color: AppColor.iconColor1,
                          text: 'Normal',
                          icon: Icons.circle),
                      SliderIcons(
                          color: AppColor.mainColor,
                          text: '1.7km',
                          icon: Icons.location_pin),
                      SliderIcons(
                          color: AppColor.iconColor2,
                          text: '32min',
                          icon: FontAwesomeIcons.clock),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
  ],
);

} }

Answer 1

我認為輪播滑塊包提供了您需要的功能。 該軟件包有一個示例，它准確地描述了您的問題。

Answer 2

你應該試試https://api.flutter.dev/flutter/widgets/ListWheelScrollView-class.html

對於您的布局，您可以將旋轉小部件用於水平視圖，當然您也可以在列表的子級上使用旋轉小部件。

Answer 3

保存當前頁面並據此調整內容。 與當前頁面下方一樣， _currentPage == index具有較小的邊距。

final _pageController = PageController(viewportFraction: 0.8);
int _currentPage = 0;

...

PageView.builder(
  controller: _pageController,
  itemCount: 5,
  itemBuilder: (_, index) =>
    Container(
      margin: _currentPage == index 
        ? const EdgeInsets.symmetric(vertical: 16)
        : const EdgeInsets.symmetric(vertical: 64),
      child: Image.network(
        'https://picsum.photos/1080/1920?index=$index', 
        fit: BoxFit.cover,
        loadingBuilder: (_, child, loadingProgress) {
          if (loadingProgress == null) return child;
          return const Center(child: CircularProgressIndicator());
        } 
      )
    ),                
    onPageChanged: (page){
      setState(() {
        _currentPage = page;
      });
    },
  )
)