如何解决如何实现由颤动中的底部负条控制的水平滚动
我必须在flutter中实现一个水平滚动列表,我可以做到这一点并包含下面的代码(该代码仍需修改,但代码的基础足以放入图片和其他此类细节中) )
但是问题是水平滚动条下方的减号栏。我不知道颤振的功能允许这样做。我搜索了很多东西,除了单选框,复选框,开关等之外,我无法找到它的任何详细信息。请查看应用程序的屏幕截图,我已将减号控件表示为红色。Home screen,the minus bar indicated in red
我编写的代码:
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,body: Container(
margin: EdgeInsets.symmetric(vertical: 20.0),height: 500,child: ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,shrinkWrap: true,children: <Widget>[
Container(
width:400,color: Colors.red,),Container(
width: 400.0,color: Colors.blue,color: Colors.green,],)
);
}
}
解决方法
您要查找的不是ListView
,而是PageView
,这是一个小代码示例,可以在DartPad中尝试并查看如何进行布局。
基本上,我使用PageController
来通过点击某些小部件来更改当前页面。
代码
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255,18,32,47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),debugShowCheckedModeBanner: false,home: Scaffold(body: MyWidget()),);
}
}
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
final _items = [Colors.red,Colors.blue,Colors.yellow];
final _pageController = PageController();
int _currentPageNotifier = 0;
final double _indicatorWidth = 30;
Widget _buildPageView() {
return PageView.builder(
controller: _pageController,itemCount: _items.length,itemBuilder: (context,index) => Center(
child: FlutterLogo(
colors: _items[index],size: 50,),onPageChanged: (int index) =>
setState(() => _currentPageNotifier = index),);
}
Widget _buildIndicator() {
List<Widget> itemWidgets = [];
for (int index = 0; index < _items.length; index++) {
itemWidgets.add(GestureDetector(
onTap: () => _pageController.animateToPage(
index,duration: Duration(milliseconds: 300),curve: Curves.ease,child: Container(
decoration: BoxDecoration(
color: _currentPageNotifier == index
? Colors.green
: Colors.grey,borderRadius: BorderRadius.circular(9),margin: EdgeInsets.only(right: 10),width: _indicatorWidth,height: 8,));
}
return Positioned(
bottom: MediaQuery.of(context).size.height / 2 - 50,left: MediaQuery.of(context).size.width / 2 -
_items.length * _indicatorWidth +
_items.length * 10,child: Row(
mainAxisAlignment: MainAxisAlignment.center,children: itemWidgets,);
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
_buildPageView(),_buildIndicator(),],);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。