【发布时间】：2021-09-12 08:16:30
【问题描述】：
我正在为此构建一个主页，我在单独的页面上创建了一个隐藏的抽屉，在单独的页面上创建了一个主屏幕，并在主页上堆叠了“隐藏的抽屉”和“主屏幕”，还在主页上创建了可折叠的搜索按钮屏幕与菜单按钮在同一行，margin:spaceBetween .
我在主页第二行的单独页面上创建了轮播滑块，即在搜索和菜单按钮下方，并在主页上调用该轮播滑块但显示错误
“一个 RenderFlex 在底部被无限像素溢出”
当我尝试将它添加到顶部时，为什么它在底部。我已经尝试了所有可能的填充和间距，但没有任何效果，请帮助
主屏幕代码
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool _folded = true;
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 250),
color: Colors.blueGrey.shade100,
child: Column(
children: [
SizedBox(
height: 40,
),
Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: SvgPicture.asset(
"assets/icons/menu.svg",
),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
width: _folded ? 52 : 250,
height: getProportionateScreenHeight(50),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(32),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
BoxShadow(
color: Colors.brown.shade300.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(-4, 0),
),
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 0,
blurRadius: 8,
offset: Offset(4, 0),
),
]),
child: Row(
children: [
Expanded(
child: Container(
padding: EdgeInsets.only(left: 16),
child: !_folded
? TextField(
decoration: InputDecoration(
hintText: 'Search Book, Author,Genre ',
hintStyle: TextStyle(
color: Colors.black54,
fontFamily:
GoogleFonts.oregano().fontFamily,
),
border: InputBorder.none,
),
)
: null,
),
),
AnimatedContainer(
duration: Duration(milliseconds: 400),
child: Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(_folded ? 32 : 0),
topRight: Radius.circular(32),
bottomLeft: Radius.circular(_folded ? 32 : 0),
bottomRight: Radius.circular(32),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: SvgPicture.asset(
_folded
? "assets/icons/search.svg"
: "assets/icons/close1.svg",
height: getProportionateScreenHeight(18),
color: Colors.black54),
),
onTap: () {
setState(() {
_folded = !_folded;
});
}),
),
)
],
),
),
),
],
),
Row(
children: [ImageSlider()],
)
],
),
);
}
}
轮播滑块的代码
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
CarouselSlider(
items: [
//1st ImageSlider
Container(
padding: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/13.jpg"),
fit: BoxFit.cover,
),
),
),
//2nd Image of Slider
Container(
padding: EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/15.jpg"),
fit: BoxFit.cover,
),
),
),
//3rd Image of Slider
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/3.jpg"),
fit: BoxFit.cover,
),
),
),
],
//Slider Container properties
options: CarouselOptions(
// height: getProportionateScreenHeight(50),
height: 50,
autoPlay: true,
reverse: true,
enlargeCenterPage: true,
autoPlayInterval: Duration(seconds: 2),
),
),
],
),
);
}
【问题讨论】：
-
从 CarouselSlider 父级移除 ListView
-
用 Container 包裹 CarouselSlider 并设置固定高度。
-
我应该返回一个容器而不是脚手架并删除列表视图将起作用以及如何设置固定高度
-
还是不行
-
您的
carousel slider代码sn-p 是指ImageSlider()吗？
标签： android flutter dart flutter-layout