flutter - 如何在颤动中添加文本和轮播图像?
问题描述
我尝试在文本中添加轮播。但目前我只能添加图像轮播,不知道如何添加文本。请帮我。全新。我希望输出类似于上面的图像和下面的文本,但两者都需要同时滑动。
我不知道在哪里添加文本字段。我用 youtube 中的一个例子制作了这个轮播。但是没有文本的轮播图像的例子。我手动尝试了一些东西,但这一切都没有很好地结束。请帮我修复它。谢谢
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(title: 'Slider'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
//Images List
List<String> images = [
'',
];
@override
void initState() {
super.initState();
pageController = PageController(initialPage: 1, viewportFraction: 0.6);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
controller: pageController,
itemCount: images.length,
itemBuilder: (context, position) {
return imageSlider(position);
}
)
);
}
imageSlider(int index) {
return AnimatedBuilder(
animation: pageController,
builder: (context, widget) {
double value = 1;
if(pageController.position.haveDimensions){
value = pageController.page - index;
value = (1 - (value.abs() * 0.3.clamp(0.0, 1.0)));
}
return Center(
child: SizedBox(
height: Curves.easeInOut.transform(value) * 400.0,
width: Curves.easeInOut.transform(value) * 350.0,
child: widget,
),
);
},
child: Container(
margin: EdgeInsets.all(10.0),
child: Image.asset(images[index],fit: BoxFit.cover),
),
);
}
}
解决方案
使用列而不是容器,所以只需替换它:
child: Container(
margin: EdgeInsets.all(10.0),
child: Image.asset(images[index],fit: BoxFit.cover),
),
有了这个:
child: Column(
// To centralize the children.
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
// First child
Container(
margin: EdgeInsets.all(10.0),
child: Image.asset(images[index],fit: BoxFit.cover),
),
// Second child
Text(
'foo',
style: TextStyle(
// Add text's style here
),
),
]
),
或者,您可以使用现成的,而不是构建自己的轮播,例如:carousel_slider或flutter_swiper
推荐阅读
- excel - 每个新行都应创建一个具有相同格式的独立 word 文档
- javascript - 想用php查看json文件数据
- android - 错误:任务':react-native-fbads:processDebugResources'的执行失败。> com.android.ide.common.process.ProcessException:无法执行 aapt
- ios - 以编程方式设置约束不适用于我的表格视图
- ios - 上面有真实世界对象的 ARKit 平面
- sql - Oracle SQL 分组和比较子集
- protocol-buffers - varint中数据块长度和文件长度有什么关系?
- ios - 目标 c - 从图库或相机中选择图像后 - 需要启用旋转、翻转编辑
- php - 密码保护文件,查询字符串除外 - .htaccess
- angular - 删除选定的行索引