gpt4 book ai didi

flutter - 如何在 flutter 中添加文本和轮播图片?

转载 作者:行者123 更新时间:2023-12-04 17:33:12 25 4
gpt4 key购买 nike

我尝试将轮播与文本一起添加。但到目前为止我只能添加图像轮播,不知道如何添加文本。请帮我。全新的。我希望输出像上面的图像和下面的文本,但两者都需要同时滑动。

我不知道在哪里添加文本字段。我用 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),
),
);
}
}

enter image description here

最佳答案

使用列而不是容器,所以只需替换它:

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,而不是构建您自己的 carousal或 flutter_swiper

关于flutter - 如何在 flutter 中添加文本和轮播图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57819187/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com