VerticalCardPager 未占用全宽

Question

在页面上单独使用VerticalCardPager 时，它可以正常工作。

但是，当在其他小部件下方使用它时，卡片的尺寸会缩小。我尝试在 SingleChildScrollView 中进行包装以扩展页面，但这不适用于 Expanded/Flexible 小部件。

主屏幕

import 'package:club2_app/widgets/vertical_card.dart';
import 'package:flutter/material.dart';

import '../widgets/news_card.dart';
import '../constants.dart';
import '../widgets/app_bar.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 10, top: 15),
                  child: Text(
                    "News",
                    style: TextStyle(
                      color: kPrimaryLightColor,
                      fontWeight: FontWeight.bold,
                      fontSize: 30,
                    ),
                  ),
                ),
              ],
            ), // 'News'
            NewsCard(),
            Row(
              children: [
                Padding(
                  padding: EdgeInsets.only(left: 10.0),
                  child: Text(
                    'Posts',
                    style: TextStyle(
                      color: kPrimaryLightColor,
                      fontWeight: FontWeight.bold,
                      fontSize: 30,
                    ),
                  ),
                ),
              ],
            ), // 'Posts'
            Expanded(
              child: Container(
                padding: EdgeInsets.all(5.0),
                width: double.infinity,
                child: VerticalCard(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

VerticalCardWidget

import 'package:flutter/material.dart';
import 'package:vertical_card_pager/vertical_card_pager.dart';

class VerticalCard extends StatefulWidget {
  @override
  _VerticalCardState createState() => _VerticalCardState();
}

final List<String> titles = [
  "How to Manage Injuries",
  "Is Football Getting Faster?",
  "Improving Match Fitness",
  "Expected Goals: The Over and Under Achievers",
];

final List<Widget> images = [
  Hero(
    tag: "News 1",
    child: ClipRRect(
      borderRadius: BorderRadius.circular(20.0),
      child: Container(
        width: double.infinity,
        child: Image.asset(
          "assets/images/Mbappe.jpeg",
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),
  Hero(
    tag: "News 2",
    child: ClipRRect(
      borderRadius: BorderRadius.circular(20.0),
      child: Image.asset(
        "assets/images/Mbappe.jpeg",
        fit: BoxFit.cover,
      ),
    ),
  ),
  Hero(
    tag: "News 3",
    child: ClipRRect(
      borderRadius: BorderRadius.circular(20.0),
      child: Image.asset(
        "assets/images/Mbappe.jpeg",
        fit: BoxFit.cover,
      ),
    ),
  ),
  Hero(
    tag: "News 4",
    child: ClipRRect(
      borderRadius: BorderRadius.circular(20.0),
      child: Image.asset(
        "assets/images/Mbappe.jpeg",
        fit: BoxFit.cover,
      ),
    ),
  ),
];

class _VerticalCardState extends State<VerticalCard> {
  @override
  Widget build(BuildContext context) {
    return VerticalCardPager(
      titles: titles,
      images: images,
      onPageChanged: (page) {
        // print(page);
      },
    );
  }
}

Answer 1

尝试将您的列包装到容器中并将其宽度设置为“double.infinity”

Answer 2

恐怕这是VerticalCardPager的限制。

VerticalCardPager 内卡片的width 和height 是根据父小部件的maxHeight 定义的：

double getWidth(maxHeight, i) {
  double cardMaxWidth = maxHeight / 2;
  return cardMaxWidth - 60 * (i - 2).abs();
}

double getHeight(maxHeight, i) {
  double cardMaxHeight = maxHeight / 2;
  if (i == 2) {
    return cardMaxHeight;
  } else if (i == 0 || i == 4) {
    return cardMaxHeight - cardMaxHeight * (4 / 5) - 10;
  } else
    return cardMaxHeight - cardMaxHeight * (4 / 5);
  }
}

对于i == 2，中间卡，width 和height 都等于maxHeight / 2。

因此，如果您希望卡片具有不同的纵横比并填充屏幕宽度，则必须修改 VerticalCardPager 的代码。

---

但是，如果您想保持相同的纵横比并扩展到屏幕之外。如您所述，您可以使用SingleChildScrollView。给你：

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Vertical Pager')),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              [...]
              SizedBox(
                height: MediaQuery.of(context).size.height,
                child: Container(
                  padding: EdgeInsets.all(5.0),
                  width: double.infinity,
                  child: VerticalCard(),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

但是，滚动行为可能有点混乱，甚至在某些设备上是不可能的。