[英]Flutter : Listview Builder Horizontal Inside Stack Widget
I have design like above, In that design I implement to app.我有上面的设计,在那个设计中我实现了应用程序。 I have Stack Widget inside container then inside Stack widget i have ListviewBuilder with Scroll direction Horizontal.
我在容器内有 Stack Widget,然后在 Stack 小部件内我有 ListviewBuilder 和滚动方向水平。 But the problem is, I cant scroll ListViewBuilder Horizontal inside Stack widget.
但问题是,我无法在 Stack 小部件内滚动 ListViewBuilder Horizontal。 How can i fixed this ?
我怎样才能解决这个问题?
My Trial Fail
我的试验失败
class HomeScreen extends StatelessWidget {
static const routeName = "/home-screen";
@override
Widget build(BuildContext context) {
final mqHeight = MediaQuery.of(context).size.height;
final mqWidth = MediaQuery.of(context).size.width;
return SafeArea(
child: Scaffold(
appBar: AppBar(
elevation: 0,
title: Text('Good Morning'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () => "",
)
],
),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.blue,
height: mqHeight / 3,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
color: Colors.red,
),
Positioned(
top: mqHeight / 4.5,
child: SizedBox(
height: 100,
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
child: Card(
elevation: 10,
child: Icon(Icons.card_giftcard)),
);
},
),
),
)
],
),
),
Container(
child: Text(
'data data data data data data data data data ',
style: Theme.of(context).textTheme.display4,
),
)
],
)),
),
);
}
}
You can copy paste run full code below您可以在下面复制粘贴运行完整代码
From https://github.com/flutter/flutter/issues/36584#issuecomment-554950474来自https://github.com/flutter/flutter/issues/36584#issuecomment-554950474
Add top, right, bottom
attribute添加
top, right, bottom
属性
code snippet代码片段
Positioned(
top: mqHeight / 4.5,
left:0.0,
right:0.0,
bottom:0.0,
child: SizedBox(
height: 100,
child: ListView.builder(
working demo工作演示
full code完整代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
static const routeName = "/home-screen";
@override
Widget build(BuildContext context) {
final mqHeight = MediaQuery.of(context).size.height;
final mqWidth = MediaQuery.of(context).size.width;
return SafeArea(
child: Scaffold(
appBar: AppBar(
elevation: 0,
title: Text('Good Morning'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () => "",
)
],
),
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.blue,
height: mqHeight / 3,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
color: Colors.red,
),
Positioned(
top: mqHeight / 4.5,
left:0.0,
right:0.0,
bottom:0.0,
child: SizedBox(
height: 100,
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
child: Card(
elevation: 10,
child: Icon(Icons.card_giftcard)),
);
},
),
),
)
],
),
),
Container(
child: Text(
'data data data data data data data data data ',
style: Theme.of(context).textTheme.display4,
),
)
],
)),
),
);
}
}
I have already fixed as below:我已经修复如下:
Positioned(
top: mqHeight / 4.5,
left: 0, /// <-- fixed here
right: 0, /// <-- fixed here
child: SizedBox(
height: 100,
child: ListView.builder(
physics: ClampingScrollPhysics(),
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return Container(
width: 100,
child: Card(
elevation: 10,
child: Icon(Icons.card_giftcard)),
);
},
),
),
)```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.