颤动中滚动视图内的Listview
Posted
技术标签:
【中文标题】颤动中滚动视图内的Listview【英文标题】：Listview inside the scroll view in flutter 【发布时间】：2018-12-18 08:42:54 【问题描述】：我正在尝试制作这种类型的视图
有 3 种类型的最新新闻、体育新闻和旧新闻，它们有 3 个列表视图数据正在填充，但我无法滚动列表视图或完整的滚动视图没有滚动我从 1 周开始尝试它找到下面的代码
我可以进行布局，但它根本不滚动
第一个标签视图
class First_Tab_Layout extends StatefulWidget
@override
State<StatefulWidget> createState()
First_State fst_state() => new First_State();
return fst_state();
class First_State extends State<First_Tab_Layout>
List latest_news_list;
List sports_news_list;
List cinema_news_list;
latestnews() async
var latest_news_url = common_url + 'getlatestPosts';
print(latest_news_url);
http.Response latest_newsresponse = await http.get(latest_news_url);
var latest_news_response = json.decode(latest_newsresponse.body);
setState(()
latest_news_list = latest_news_response['posts'];
);
sportsnews() async
var sports_news_url = common_url + 'getsportsPosts';
print(sports_news_url);
http.Response sports_newsresponse = await http.get(sports_news_url);
var sports_news_response = json.decode(sports_newsresponse.body);
setState(()
sports_news_list = sports_news_response['posts'];
);
cinemanews() async
var cinema_news_url = common_url + 'getcinemaPosts';
print(cinema_news_url);
http.Response cinema_newsresponse = await http.get(cinema_news_url);
var cinema_news_response = json.decode(cinema_newsresponse.body);
setState(()
cinema_news_list = cinema_news_response['posts'];
);
@override
void initState()
super.initState();
latestnews();
sportsnews();
cinemanews();
@override
Widget build(BuildContext context)
return new MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
body: new ListView(
primary: true,
children: <Widget>[
new Container(
child: new Text(
'Latest News',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.only(left: 10.0, right: 10.0, bottom: 5.0),
alignment: Alignment(-1.0, 0.0),
),
new Container(
child: new Divider(
color: secondarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0),
),
new Container(
child: new ListView.builder(
shrinkWrap: true,
itemCount: latest_news_list == null ? 0 : latest_news_list.length,
itemBuilder: (BuildContext context, int indexpos)
return new GestureDetector(
onTap: ()
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new News_Details(
postid: latest_news_list[indexpos]['id'],
)));
,
child: new Card(
elevation: 4.0,
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
child: new Row(
children: <Widget>[
new Container(
child: new Image.network(
latest_news_list[indexpos]['image'],
width: 150.0,
fit: BoxFit.fill,
),
),
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: new Text(
latest_news_list[indexpos]['title']),
margin: EdgeInsets.only(left: 10.0),
),
new Container(
child: new Text(
latest_news_list[indexpos]['content'],
softWrap: true,
maxLines: 4,
),
margin: EdgeInsets.only(left: 10.0, top: 5.0),
),
],
),
)
],
),
),
);
,
),
),
new Container(
child: new Text(
'Sports News',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
alignment: Alignment(-1.0, 0.0),
),
new Container(
child: new Divider(
color: secondarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0),
),
new Container(
child: new ListView.builder(
shrinkWrap: true,
itemCount: sports_news_list == null ? 0 : sports_news_list.length,
itemBuilder: (BuildContext context, int indexpos)
return new GestureDetector(
child: new Card(
elevation: 4.0,
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
child: new Row(
children: <Widget>[
new Container(
child: new Image.network(
sports_news_list[indexpos]['image'],
width: 150.0,
height: 75.0,
fit: BoxFit.fill,
),
),
new Column(
children: <Widget>[
new Container(
child:
new Text(sports_news_list[indexpos]['title']),
margin: EdgeInsets.only(left: 10.0),
),
new Container(
child:
new Text(sports_news_list[indexpos]['title']),
margin: EdgeInsets.only(left: 10.0, top: 5.0),
),
],
)
],
),
),
);
,
),
),
new Container(
child: new Text(
'Cinema News',
style: new TextStyle(fontSize: 16.0),
),
margin: EdgeInsets.only(
left: 10.0, right: 10.0, top: 10.0, bottom: 5.0),
alignment: Alignment(-1.0, 0.0),
),
new Container(
child: new Divider(
color: secondarycolor,
),
margin: EdgeInsets.only(right: 10.0, left: 10.0),
),
new Container(
child: new ListView.builder(
shrinkWrap: true,
itemCount: cinema_news_list == null ? 0 : cinema_news_list.length,
itemBuilder: (BuildContext context, int indexpos)
return new GestureDetector(
child: new Card(
elevation: 4.0,
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
child: new Row(
children: <Widget>[
new Container(
child: new Image.network(
cinema_news_list[indexpos]['image'],
width: 150.0,
height: 75.0,
fit: BoxFit.fill,
),
),
new Column(
children: <Widget>[
new Container(
child: new Text(
cinema_news_list[indexpos]['categorytitle']),
margin: EdgeInsets.only(left: 10.0),
),
new Container(
child: new Text(
cinema_news_list[indexpos]['categorytitle']),
margin: EdgeInsets.only(left: 10.0, top: 5.0),
),
],
)
],
),
),
);
,
),
),
],
)),
);
【问题讨论】：
【参考方案1】：这对我有用。不确定这是否适合您。试一次。我刚刚在内部ListView 中添加了物理。
new Container(
child: new ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
【讨论】：
物理问题解决了我的问题，因此它仍然可以在 Flutter 1.9.1 版本中作为修复工作 shrinkwrap 使列表视图立即展开，而 NeverScrollable 使其中的滚动禁用，从而使整个页面滚动。但是，如果我希望两者都以不展开列表视图的方式滚动，并且在两者之间以适当的方式声明滚动事件，该怎么办 这解决了我的问题，listview inside customscrollview inside tabbarview.. 滚动父折叠小部件【参考方案2】：这对我有用：
Widget build(BuildContext context)
return Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
child: ListView(
children: <Widget>[
selectedAddressSection(),
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 0, 10),
child: Text("YOUR FAVOURITE PAYMENT METHODS",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 14.0,
fontFamily: 'Novecento Book',
fontWeight: FontWeight.bold)),
),
selectedPaymentMethod(),
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 0, 10),
child: Text("PAYMENT DETAILS",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 14.0,
fontFamily: 'Novecento Book',
fontWeight: FontWeight.bold)),
),
SizedBox(
height: 8.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 15),
child: Text(
"Subtotal",
textAlign: TextAlign.start,
style: TextStyle(
color: const Color(0xFF000000),
fontSize: 12.0,
fontFamily: 'Novecento Book',
fontWeight: FontWeight.w300),
),
),
Container(
margin: EdgeInsets.only(right: 15),
child: Text(
'\u20B9$2500.00',
textAlign: TextAlign.start,
style: TextStyle(
color: const Color(0xFF000000),
fontSize: 12.0,
fontFamily: 'Novecento Book',
fontWeight: FontWeight.w300),
),
),
],
),
SizedBox(
height: 8.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 15),
child: Text(
"Shipping",
textAlign: TextAlign.start,
style: TextStyle(
color: const Color(0xFF000000),
fontSize: 12.0,
fontFamily: 'Novecento Book',
fontWeight: FontWeight.w300),
),
),
Container(
margin: EdgeInsets.only(right: 15),
child: Text(
'Free',
textAlign: TextAlign.start,
style: TextStyle(
color: const Color(0xFF000000),
fontSize: 12.0,
fontFamily: 'Novecento Book',
fontWeight: FontWeight.w300),
),
),
],
),
SizedBox(
height: 8.0,
),
Divider(
color: Colors.grey.shade400,
height: 10,
thickness: 0.5,
indent: 10,
endIndent: 10,
),
SizedBox(
height: 8.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 15),
child: Text(
"Grand total",
textAlign: TextAlign.start,
style: TextStyle(
color: const Color(0xFF000000),
fontSize: 12.0,
fontFamily: 'Novecento Book',
fontWeight: FontWeight.bold),
),
),
Container(
margin: EdgeInsets.only(right: 15),
child: Text(
'\u20B9$2500.00',
textAlign: TextAlign.start,
style: TextStyle(
color: const Color(0xFF000000),
fontSize: 12.0,
fontFamily: 'Novecento Book',
fontWeight: FontWeight.bold),
),
),
],
),
Divider(
color: Colors.grey.shade400,
height: 20,
thickness: 0.5,
indent: 10,
endIndent: 10,
),
// standardDelivery(),
//priceSection()
],
),
),
),
],
),
),
);
【讨论】：
【参考方案3】：尝试在内部ListView中使用physics: const NeverScrollableScrollPhysics() 除了shrinkWrap: true 如下所示。
Container(
child: ListView(
children: <Widget>[
Container(..*/Widget 1*/..),
Container(child: new ListView.builder(
shrinkWrap: true, //Put shrinkWrap as true
physics: const NeverScrollableScrollPhysics(), //Put this in the inner ListView Builder
itemBuilder: (BuildContext context, int index) ...*/Rest of the code*/..
【讨论】：
以上是关于颤动中滚动视图内的Listview的主要内容，如果未能解决你的问题，请参考以下文章