我需要进行此设计
但是当我添加列表视图时,它不起作用我需要垂直列表而不是水平ListView.builder(scrollDirection:Axis.vertical,收缩包裹:是的,itemCount:12itemBuilder :(上下文,索引){返回文本(“我的小部件卡将在此处添加”);})
这是我的代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyAppNameAppTemplesListing extends StatefulWidget {
MyAppNameAppTemplesListing({Key key}) : super(key: key);
@override
_MyAppNameAppTemplesListingState createState() =>
_MyAppNameAppTemplesListingState();
}
class _MyAppNameAppTemplesListingState
extends State<MyAppNameAppTemplesListing> {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height*.4,
),
Container(
height: MediaQuery.of(context).size.height*.14,
color: Colors.pink[100],
),
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Temples",style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold),),
),
),
Positioned(
top: 55,
child: Padding(
padding: const EdgeInsets.only(left: 4,right: 4),
child:
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 50.0,
width: MediaQuery.of(context).size.width*.97,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: Container(
margin: EdgeInsets.only(left: MediaQuery.of(context).size.width*.4),
child: new Text("Favourite",style: TextStyle(fontSize: 16, color: Colors.grey,fontWeight: FontWeight.bold),)),
)),
),
Container(
height: 50.0,
width: MediaQuery.of(context).size.width*.5,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Colors.pink[800],
Colors.pink[700],
Colors.red[600],
Colors.red[400],
],
),
color: Colors.redAccent[100],
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: new Text("ALL",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
)),
),
],
),
ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context,index){
return Text("my widget card will add here");
})
],
),
),
),
],
);
}
}
您必须将listview包装在容器或sizebox中。。
Container( child: ListView.builder( scrollDirection: Axis.horizontal, shrinkWrap: true, itemCount: 2, itemBuilder: (context,index){ return Text("my widget card will add here"); }), ),
如果列表仍然没有出现,请尝试在容器上输入
height
和width
。