Я пытаюсь отобразить LayoutBuilder в приведенном ниже коде. Для этого требуется преобразовать ListView в ListView.builder, а также GridView в GridView.builder внутри LayoutBuilder. Кажется, что использование функции карты внутри item.builder невозможно. Каков общий подход к конверсии?
Надеюсь, эта ссылка поможет вам изменить свой код.
Список с конструктором строителя
ListView.builder(
itemCount: 5,
itemBuilder: (BuildContext context,int index){
return ListTile(
leading: Icon(Icons.list),
trailing: Text("GFG",
style: TextStyle(
color: Colors.green,fontSize: 15),),
title:Text("List item $index")
);
}
)
Gridview с конструктором строителя
GridView.builder(
itemCount: images.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 4.0, mainAxisSpacing: 4.0),
itemBuilder: (BuildContext context, int index){
return Image.network(images[index]);
},
)),
Ваш LayoutBuilder будет выглядеть так:
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return (isListViewOn && !isGridViewOn)
? ListView.builder(
itemCount: hotels.length,
itemBuilder: (context, index) {
return ListTile(
leading: Text(hotels[index].uuid),
title: Text(hotels[index].name),
subtitle: Text(hotels[index].poster),
);
},
)
: GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemCount: hotels.length,
itemBuilder: (cpntext, index) {
return GridTile(
header: Text(hotels[index].poster),
child: Text(hotels[index].uuid),
footer: Text(hotels[index].name),
);
},
);
},
)
Весь код будет выглядеть примерно так. Примечание. Я жестко закодировал данные, полученные с URL-адреса, в ваш код и заново создал класс HotelPreview:
import 'package:flutter/material.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,
),
initialRoute: '/',
routes: {
'/': (BuildContext context) => const MyHomePage(),
},
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isLoading = false;
bool hasError = false;
List<HotelPreview> hotels;
String errorMessage;
bool isGridViewOn = false;
bool isListViewOn = true;
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
void initState() {
super.initState();
getDataDio();
}
List<Map<String, dynamic>> json = [
{
"uuid": "a9446b47-b0a1-454d-b89d-c3b848b7dc7c",
"name": "B&B-La-Fontaine",
"poster": "b&b_la_fontaine_1.jpg"
},
{
"uuid": "64f4ecc6-368e-414e-b6fe-8a059affe1ca",
"name": "Upon Lisbon Prime Residences",
"poster": "upon_lisbon_prime_residences_2.jpg"
},
{
"uuid": "82aded74-373e-4b9e-b721-ebb938e9ac19",
"name": "Disney Dreams",
"poster": "disney_dreams_1.jpg"
},
{
"uuid": "e08e35df-77a2-436a-9eb5-1dca46e0da00",
"name": "Flora Chiado Apartments",
"poster": "flora_chiado_apartments_1.jpg"
},
{
"uuid": "d782a2bf-1055-482a-9e3f-dffe25f023bd",
"name": "Golden Ratio",
"poster": "golden_ratio_1.jpg"
},
{
"uuid": "35344e37-ca0e-41a8-9c87-b13141d3e816",
"name": "Grand Orlando Resort",
"poster": "grand_orlando_resort_1.jpg"
},
{
"uuid": "0dd3c4e1-fb37-4348-aa06-7a2afc81c16a",
"name": "Holiday Inn & Suites Orlando",
"poster": "holiday_inn_&_suites_orlando_1.jpg"
},
{
"uuid": "3a4dea4b-17c2-4c5a-8cb2-556af5c7091b",
"name": "Motel One Brussels",
"poster": "motel_one_brussels_1.jpg"
},
{
"uuid": "ac1f829d-ffce-49d1-8ce6-9778559c98e5",
"name": "New Rome House",
"poster": "new_rome_house_1.jpg"
},
{
"uuid": "44c84d52-a815-40f6-a47c-1b8782b3de6e",
"name": "Oscar Hotel",
"poster": "oscar_hotel_1.jpg"
},
{
"uuid": "be338e29-d3dd-4298-924e-5604e8a7b350",
"name": "P 17 Hotel",
"poster": "p_17_hotel_1.jpg"
},
{
"uuid": "85af46cd-ed99-4c9f-ba22-6e34ea5bb8da",
"name": "Parkway International",
"poster": "parkway_international_1.jpg"
},
{
"uuid": "7fcd8e0c-fd4a-4146-bada-700e8790b69a",
"name": "Stradom Apartments",
"poster": "stradom_apartments_1.jpg"
},
{
"uuid": "b505a79c-0280-4a09-bba0-b984e1eed188",
"name": "Upon Lisbon Prime Residences",
"poster": "upon_lisbon_prime_residences_1.jpg"
}
];
getDataDio() async {
setState(() {
isLoading = true;
});
// try {
// final response = await _dio
// .get('https://run.mocky.io/v3/ac888dc5-d193-4700-b12c-abb43e289301');
// var data = response.data;
// hotels = data
// .map<HotelPreview>(
// (hotelPreview) => HotelPreview.fromJson(hotelPreview))
// .toList();
// } on DioError catch (e) {
// setState(() {
// errorMessage = e.response.data['message'];
// hasError = true;
// isLoading = false;
// });
// }
final data = json;
hotels = data
.map<HotelPreview>(
(hotelPreview) => HotelPreview.fromJson(hotelPreview))
.toList();
setState(() {
isLoading = false;
hasError = false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('Hotel Preview'),
actions: [
IconButton(
icon: const Icon(Icons.view_list),
onPressed: () {
setState(() {
isListViewOn = !isListViewOn;
isGridViewOn = !isGridViewOn;
});
},
),
IconButton(
icon: const Icon(Icons.view_module),
onPressed: () {
setState(() {
isListViewOn = !isListViewOn;
isGridViewOn = !isGridViewOn;
});
},
),
],
),
body: isLoading
? const Center(child: CircularProgressIndicator())
: hasError
? const Text('Page not found')
: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return (isListViewOn && !isGridViewOn)
? ListView.builder(
itemCount: hotels.length,
itemBuilder: (context, index) {
return ListTile(
leading: Text(hotels[index].uuid),
title: Text(hotels[index].name),
subtitle: Text(hotels[index].poster),
);
},
)
: GridView.builder(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemCount: hotels.length,
itemBuilder: (cpntext, index) {
return GridTile(
header: Text(hotels[index].poster),
child: Text(hotels[index].uuid),
footer: Text(hotels[index].name),
);
},
);
},
),
);
}
}
class HotelPreview {
String uuid;
String name;
String poster;
HotelPreview({this.uuid, this.name, this.poster});
HotelPreview.fromJson(Map<String, dynamic> json) {
uuid = json['uuid'];
name = json['name'];
poster = json['poster'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = Map<String, dynamic>();
data['uuid'] = this.uuid;
data['name'] = this.name;
data['poster'] = this.poster;
return data;
}
}