在颤动中显示带有网格视图的图像
Posted
技术标签:
【中文标题】在颤动中显示带有网格视图的图像【英文标题】：show images with grid view in flutter 【发布时间】：2021-01-27 10:56:00 【问题描述】：我尝试使用 StaggeredGridView，但它不会在我的页面上加载任何内容，甚至不仅仅是文本。我还没有放图片网址，因为我想测试一下。
到目前为止，这是我的以下代码：
body: ListView(
children: [
Container(
width: deviceSize.width,
height: 650,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Image.asset(
'assets/Big Sur.jpg',
width: deviceSize.width,
fit: BoxFit.cover,
),
Stack(
children: [
Text(
"""\n\n\nA decentralized photography platform\nfor the devoted communities.""",
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
Text(
'PhoBlock',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 80,
),
)
],
),
],
),
),
SizedBox(
height: 50,
),
StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemBuilder: (BuildContext context, int index)
return Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
),
);
,
staggeredTileBuilder: (int index)
return StaggeredTile.count(2, index.isEven ? 2 : 1);
,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
这是来自 Scaffold 小部件的主体。请帮助我，因为我正在尝试弄清楚如何使用这个新的 StaggeredGridView 小部件...
【问题讨论】：
使用列并删除列表视图 你也可以使用 Expanded 并在 expand 的 child 中添加 gridview 【参考方案1】：您可以在下面复制粘贴运行完整代码
您可以使用Column 和Expanded 来控制大小
代码sn-p
Column(mainAxisSize: MainAxisSize.min, children: [
Expanded(
child: Container(
width: deviceSize.width,
//height: 650,
child: Stack(
...
),
SizedBox(
height: 50,
),
Expanded(
flex: 1,
child: StaggeredGridView.countBuilder(
工作演示
完整代码
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
@override
Widget build(BuildContext context)
var deviceSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(mainAxisSize: MainAxisSize.min, children: [
Expanded(
child: Container(
width: deviceSize.width,
//height: 650,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Image.network(
'https://picsum.photos/250?image=9',
width: deviceSize.width,
fit: BoxFit.cover,
),
Stack(
children: [
Text(
"""\n\n\nA decentralized photography platform\nfor the devoted communities.""",
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
Text(
'PhoBlock',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 80,
),
)
],
),
],
),
),
),
SizedBox(
height: 50,
),
Expanded(
flex: 1,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemBuilder: (BuildContext context, int index)
return Container(
color: Colors.green,
child: Center(
child: CircleAvatar(
backgroundColor: Colors.white,
child: Text('$index'),
),
),
);
,
staggeredTileBuilder: (int index)
return StaggeredTile.count(2, index.isEven ? 2 : 1);
,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
]));
工作演示 2
完整代码2
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
void main()
runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
class MyHomePage extends StatefulWidget
MyHomePage(Key key, this.title) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage>
@override
Widget build(BuildContext context)
var deviceSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: LayoutBuilder(builder: (context, constraints)
return SingleChildScrollView(
child: ConstrainedBox(
constraints: constraints.copyWith(
minHeight: constraints.maxHeight,
maxHeight: double.infinity,
),
child: Column(mainAxisSize: MainAxisSize.min, children: [
Container(
width: deviceSize.width,
height: 450,
child: Stack(
alignment: AlignmentDirectional.center,
children: [
Image.network(
'https://picsum.photos/250?image=9',
width: deviceSize.width,
fit: BoxFit.cover,
),
Stack(
children: [
Text(
"""\n\n\nA decentralized photography platform\nfor the devoted communities.""",
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
Text(
'PhoBlock',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 80,
),
)
],
),
],
),
),
SizedBox(
height: 50,
),
Container(
height: 500,
child: StaggeredGridView.countBuilder(
crossAxisCount: 4,
itemBuilder: (BuildContext context, int index)
return Container(
color: Colors.green,
child: Center(
child: CircleAvatar(
backgroundColor: Colors.white,
child: Text('$index'),
),
),
);
,
staggeredTileBuilder: (int index)
return StaggeredTile.count(2, index.isEven ? 2 : 1);
,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
),
]),
),
);
));
【讨论】：
这看起来几乎完美！是否也可以滚动第一列？ 请查看完整代码 2 和工作演示 2。很高兴为您提供帮助。如果对您有帮助，请将其标记为答案。谢谢。 我一直试图让 StaggeredGridView 没有展开...它显示错误...您认为有一种方法可以显示像这样的图像网格但能够与“标题”一起向下滚动?就像在 Unsplash 网站中一样，您会看到一个大标题图像，当我向下滚动时，标题被滚动并继续查看图像......不要误会我的意思，您的代码就像魅力一样！它只是不符合我自己的目标......以上是关于在颤动中显示带有网格视图的图像的主要内容，如果未能解决你的问题，请参考以下文章