flutter - VerticalCardPager 未占用全宽
问题描述
单独在页面上使用时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);
},
);
}
}
解决方案
恐怕这是VerticalCardPager
.
a 中的卡片的width
and是基于Parent Widget 的定义的:height
VerticalCardPager
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
, 中间的 Card ,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(),
),
)
],
),
),
),
);
}
}
但是,滚动行为可能有点混乱,甚至在某些设备上是不可能的。
推荐阅读
- javascript - 自定义光标 - 悬停时增长
- javascript - 将 JSON 转换为 XML Angular 7
- java - Netbeans 不加载简单的 GUI
- c - 如何正确格式化 C 中的这些循环,我的教授希望它如何?
- python - 根据日期加入熊猫数据框
- reactjs - useEffect 中的推送历史记录导致其他路由中的重定向
- java - 当 Key 是自定义类对象时,如何使用 String 从 HashMap 中检索值?
- laravel - 订阅私人频道的 Pusher Auth 值具有无效的格式 'key:signature' (Laravel)
- delphi - 在 Delphi 中从剪贴板中读取 HTML 内容
- javascript - 如何替换 ExtJS 项目中丢失的文件夹?