#image #flutter #flutter-web
#изображение #flutter #flutter-web
Вопрос:
Я пытался использовать StaggeredGridView, но он ничего не загружает на мою страницу, даже просто текст. Я еще не разместил URL-адреса изображений, потому что хочу это протестировать.
Пока это мой код ниже:
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(
"""nnnA decentralized photography platformnfor 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…
Комментарии:
1. используйте столбец и удалите listview
2. вы также можете использовать Expanded и добавить gridview в дочерний элемент expanded
Ответ №1:
Вы можете копировать вставлять запускать полный код ниже
, который вы можете использовать Column и Expanded для управления размером
фрагмента кода
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(
"""nnnA decentralized photography platformnfor 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(
"""nnnA decentralized photography platformnfor 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,
),
),
]),
),
);
}));
}
}
Комментарии:
1. Это выглядит почти идеально! Возможно ли, чтобы первый столбец тоже прокручивался?
2. пожалуйста, ознакомьтесь с полным кодом 2 и рабочей демонстрацией 2. Рад помочь. пожалуйста, отметьте это как ответ, если это вам поможет. Спасибо.
3. Я продолжаю пытаться иметь StaggeredGridView без Expanded…it показывает errors…do вы думаете, что есть способ показывать сетки с изображениями, подобными этому, но с возможностью прокрутки вниз вместе с «заголовком»? Как и на веб-сайте Unsplash, вы увидите большое изображение заголовка, и при прокрутке вниз заголовок прокручивается и переходит к просмотру изображений… не поймите меня неправильно, ваш код работает как шарм! это просто пока не соответствует моей собственной цели…