Как мне заставить этот официальный образец Flutter ListView прокручиваться на iOS? ⇐ IOS
-
Гость
Как мне заставить этот официальный образец Flutter ListView прокручиваться на iOS?
Я хочу создать прокручиваемый ListView в приложении Flutter. Я попытался скопировать пример кода, использующего ListView, из этого руководства. Я изменил список предметов, чтобы он стал длиннее экрана. Его можно прокручивать в браузере при использовании встроенной версии в руководстве, но он не прокручивается, когда я создаю приложение для iOS (с использованием кода Visual Studio) и тестирую его в симуляторе iOS.
Вот мой модифицированный код:
import 'package:flutter/material.dart'; класс Продукт { const Product({required this.name}); последнее имя строки; } typedef CartChangedCallback = Функция (Продукт, bool inCart); класс ShoppingListItem расширяет StatelessWidget { ShoppingListItem({ требуется этот.продукт, требуется this.inCart, требуется this.onCartChanged, }) : супер(ключ: ObjectKey(продукт)); конечный продукт; окончательное логическое значение inCart; окончательный CartChangedCallback onCartChanged; Цвет _getColor (контекст BuildContext) { // Тема зависит от BuildContext, потому что разные // части дерева могут иметь разные темы. // BuildContext указывает, где находится сборка // происходит и, следовательно, какую тему использовать. вернуться в корзину // ? Цвета.черный54 : Theme.of(context).primaryColor; } ТекстСтиль? _getTextStyle (контекст BuildContext) { if (!inCart) возвращает ноль; вернуть константный TextStyle( цвет: Цвета.черный54, оформление: TextDecoration.lineThrough, ); } @переопределить Сборка виджета (контекст BuildContext) { вернуть ListTile( onTap: () { onCartChanged (продукт, inCart); }, ведущий: CircleAvatar( фоновый цвет: _getColor(контекст), дочерний элемент: Текст(product.name[0]), ), Название: Текст( наименование товара, стиль: _getTextStyle(контекст), ), ); } } класс ShoppingList расширяет StatefulWidget { const ShoppingList({required this.products, super.key}); окончательный список продуктов ; // Платформа вызывает createState в первый раз // виджет появляется в заданном месте дерева. // Если родитель перестраивает и использует тот же тип // виджет (с тем же ключом), фреймворк использует повторно // объект State вместо создания нового объекта State. @переопределить State createState() => _ShoppingListState(); } класс _ShoppingListState расширяет State { окончательный _shoppingCart = {}; void _handleCartChanged (Продукт, bool inCart) { setState(() { // Когда пользователь меняет содержимое корзины, вам нужно // чтобы изменить _shoppingCart внутри вызова setState на // запускаем перестроение. // Затем фреймворк вызывает сборку, как показано ниже: // который обновляет внешний вид приложения. если (!inCart) { _shoppingCart.add(продукт); } еще { _shoppingCart.remove(продукт); } }); } @переопределить Сборка виджета (контекст BuildContext) { вернуть эшафот( AppBar: AppBar( title: const Text('Список покупок'), ), тело: ListView( отступ: const EdgeInsets.symmetric(вертикаль: 8), дети: widget.products.map((product) { вернуть ShoppingListItem( продукт: продукт, inCart: _shoppingCart.contains(продукт), onCartChanged: _handleCartChanged, ); }).к списку(), ), ); } } пустая функция() { runApp(const MaterialApp( title: «Приложение для покупок», дома: Список покупок( продукты: [ Продукт(название: «Яйца»), Продукт(название: «Мука»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), ], ), )); }
Я хочу создать прокручиваемый ListView в приложении Flutter. Я попытался скопировать пример кода, использующего ListView, из этого руководства. Я изменил список предметов, чтобы он стал длиннее экрана. Его можно прокручивать в браузере при использовании встроенной версии в руководстве, но он не прокручивается, когда я создаю приложение для iOS (с использованием кода Visual Studio) и тестирую его в симуляторе iOS.
Вот мой модифицированный код:
import 'package:flutter/material.dart'; класс Продукт { const Product({required this.name}); последнее имя строки; } typedef CartChangedCallback = Функция (Продукт, bool inCart); класс ShoppingListItem расширяет StatelessWidget { ShoppingListItem({ требуется этот.продукт, требуется this.inCart, требуется this.onCartChanged, }) : супер(ключ: ObjectKey(продукт)); конечный продукт; окончательное логическое значение inCart; окончательный CartChangedCallback onCartChanged; Цвет _getColor (контекст BuildContext) { // Тема зависит от BuildContext, потому что разные // части дерева могут иметь разные темы. // BuildContext указывает, где находится сборка // происходит и, следовательно, какую тему использовать. вернуться в корзину // ? Цвета.черный54 : Theme.of(context).primaryColor; } ТекстСтиль? _getTextStyle (контекст BuildContext) { if (!inCart) возвращает ноль; вернуть константный TextStyle( цвет: Цвета.черный54, оформление: TextDecoration.lineThrough, ); } @переопределить Сборка виджета (контекст BuildContext) { вернуть ListTile( onTap: () { onCartChanged (продукт, inCart); }, ведущий: CircleAvatar( фоновый цвет: _getColor(контекст), дочерний элемент: Текст(product.name[0]), ), Название: Текст( наименование товара, стиль: _getTextStyle(контекст), ), ); } } класс ShoppingList расширяет StatefulWidget { const ShoppingList({required this.products, super.key}); окончательный список продуктов ; // Платформа вызывает createState в первый раз // виджет появляется в заданном месте дерева. // Если родитель перестраивает и использует тот же тип // виджет (с тем же ключом), фреймворк использует повторно // объект State вместо создания нового объекта State. @переопределить State createState() => _ShoppingListState(); } класс _ShoppingListState расширяет State { окончательный _shoppingCart = {}; void _handleCartChanged (Продукт, bool inCart) { setState(() { // Когда пользователь меняет содержимое корзины, вам нужно // чтобы изменить _shoppingCart внутри вызова setState на // запускаем перестроение. // Затем фреймворк вызывает сборку, как показано ниже: // который обновляет внешний вид приложения. если (!inCart) { _shoppingCart.add(продукт); } еще { _shoppingCart.remove(продукт); } }); } @переопределить Сборка виджета (контекст BuildContext) { вернуть эшафот( AppBar: AppBar( title: const Text('Список покупок'), ), тело: ListView( отступ: const EdgeInsets.symmetric(вертикаль: 8), дети: widget.products.map((product) { вернуть ShoppingListItem( продукт: продукт, inCart: _shoppingCart.contains(продукт), onCartChanged: _handleCartChanged, ); }).к списку(), ), ); } } пустая функция() { runApp(const MaterialApp( title: «Приложение для покупок», дома: Список покупок( продукты: [ Продукт(название: «Яйца»), Продукт(название: «Мука»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), Продукт(название: «Шоколадные чипсы»), ], ), )); }
Мобильная версия