我是新手,所以我无法在此代码中找到问题。一切正常,但我尝试使用带有两行的Grid列表,当我将高度赋予列表的父容器但我想根据项目包装Height时,它们工作正常。
void main() {
runApp(new MaterialApp(
home: new MyHome(),
));
}
class MyHome extends StatefulWidget {
@override
_AppState createState() => _AppState();
}
TextEditingController controller = new TextEditingController();
class _AppState extends State<MyHome> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: PreferredSize(
preferredSize: Size(null, 180),
child: CustomAppBar(_scaffoldKey, controller),
),
drawer: createDrawer(),
body: SingleChildScrollView(
child: Container(
color: Colors.black12,
//=========Main Container For Scrollview==============//
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
child: Column(
children: <Widget>[
Container(
//================Container for Categories==================//
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 10, 15, 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
],
),
),
),
Card(
child: SizedBox(
height: 200.0,
child: Carousel(
images: [
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
],
dotSize: 4.0,
dotSpacing: 15.0,
indicatorBgPadding: 5.0,
borderRadius: false,
)),
),
// ======================这是问题所在============ //
GridView.count(
childAspectRatio: 4.0,
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
)
],
),
),
),
),
);
}
}
答案 0 :(得分:1)
由于您将SingleChildScrollView
用作GridView
的父窗口小部件,因此您需要指定primary: false
和shrinkWrap: true
,以便GridView根据项目计数。
完整代码:
void main() {
runApp(new MaterialApp(
home: new MyHome(),
));
}
class MyHome extends StatefulWidget {
@override
_AppState createState() => _AppState();
}
TextEditingController controller = new TextEditingController();
class _AppState extends State<MyHome> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: PreferredSize(
preferredSize: Size(null, 180),
child: CustomAppBar(_scaffoldKey, controller),
),
drawer: createDrawer(),
body: SingleChildScrollView(
child: Container(
color: Colors.black12,
//=========Main Container For Scrollview==============//
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 15, 0, 0),
child: Column(
children: <Widget>[
Container(
//================Container for Categories==================//
color: Colors.white,
child: Padding(
padding: const EdgeInsets.fromLTRB(15, 10, 15, 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
Column(
children: <Widget>[
CircleAvatar(
backgroundImage:
ExactAssetImage('images/user_icon.png'),
minRadius: 20,
maxRadius: 30,
),
Text(
'Women',
style: TextStyle(
fontSize: 13,
color: Colors.black,
fontFamily: 'SFProRegular'),
)
],
),
],
),
),
),
Card(
child: SizedBox(
height: 200.0,
child: Carousel(
images: [
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage(
'https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
],
dotSize: 4.0,
dotSpacing: 15.0,
indicatorBgPadding: 5.0,
borderRadius: false,
)),
),
GridView.count(
shrinkWrap: true,
primary: false,
childAspectRatio: 4.0,
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline,
),
);
}),
)
],
),
),
),
),
);
}
}