dart 视图抖动会阻止showmodalbottomsheet向上扩展

kg7wmglp  于 2024-01-04  发布在  其他
关注(0)|答案(1)|浏览(199)

我有一个在showmodalbottomsheet中打开的视图,由于某种原因,当我向上滚动时它不会展开,但例如,当它到达未找到的产品时,它确实工作正常并滚动,我认为某些功能会扰乱视图,但我尝试了所有方法,我无法访问以前的版本,以下是代码:

  1. class ProductDetailsView extends StatefulWidget {
  2. final String barcodeValue;
  3. const ProductDetailsView({required this.barcodeValue});
  4. @override
  5. _ProductDetailsViewState createState() => _ProductDetailsViewState();
  6. }
  7. class _ProductDetailsViewState extends State<ProductDetailsView> {
  8. @override
  9. Widget build(BuildContext context) {
  10. return FutureBuilder<Product>(
  11. future: getProductById(widget.barcodeValue),
  12. builder: (context, snapshot) {
  13. if (snapshot.connectionState == ConnectionState.waiting) {
  14. return Center(child: CircularProgressIndicator());
  15. } else if (snapshot.hasError) {
  16. return Column(
  17. children: [
  18. Center(
  19. child: Text(
  20. 'Error: ${snapshot.error}',
  21. style: TextStyle(
  22. fontWeight: FontWeight.bold,
  23. fontSize: 18.0,
  24. ),
  25. ),
  26. ),
  27. ],
  28. );
  29. } else if (!snapshot.hasData || snapshot.data == null) {
  30. return Column(
  31. children: [
  32. Center(
  33. child: Text(
  34. 'Product not found',
  35. style: TextStyle(
  36. fontWeight: FontWeight.bold,
  37. fontSize: 18.0,
  38. ),
  39. ),
  40. ),
  41. ],
  42. );
  43. } else {
  44. Product product = snapshot.data!;
  45. return Directionality(
  46. textDirection: TextDirection.rtl,
  47. child: SingleChildScrollView(
  48. padding: EdgeInsets.all(16),
  49. child: Column(
  50. crossAxisAlignment: CrossAxisAlignment.start,
  51. children: [
  52. // Display cached product image
  53. Row(
  54. crossAxisAlignment: CrossAxisAlignment.start,
  55. children: [
  56. // Display cached product image
  57. Expanded(
  58. child: CachedNetworkImage(
  59. imageUrl: product.imageUrl,
  60. placeholder: (context, url) => CircularProgressIndicator(),
  61. errorWidget: (context, url, error) => Icon(Icons.error),
  62. height: 150,
  63. fit: BoxFit.cover,
  64. ),
  65. ),
  66. SizedBox(width: 16), // Add spacing between image and details
  67. // Display product information
  68. Expanded(
  69. flex: 2, // Adjust the flex value as needed
  70. child: Column(
  71. crossAxisAlignment: CrossAxisAlignment.start,
  72. children: [
  73. Text('שם המוצר: ${product.name}', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
  74. SizedBox(height: 8),
  75. Text('יצרן: ${product.manufacturer}', style: TextStyle(fontSize: 16)),
  76. SizedBox(height: 8),
  77. Row(
  78. children: [
  79. // Circle with color based on rating
  80. // Display product rating
  81. Text(
  82. '100 / ${product.calculateHealthRating()}',
  83. style: TextStyle(
  84. fontSize: 16,
  85. fontWeight: FontWeight.bold,
  86. ),
  87. ),
  88. SizedBox(width: 8), // Add spacing between circle and text
  89. buildRatingCircle(product.calculateHealthRating()),
  90. ],
  91. ),
  92. ],
  93. ),
  94. ),
  95. ],
  96. ),
  97. // Display bad attributes
  98. SizedBox(height: 16),
  99. Text('תכונות שליליות', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
  100. if (product.badAttributes!.isNotEmpty)
  101. buildAttributesColumn(product.badAttributes!, Colors.red),
  102. // Display good attributes
  103. SizedBox(height: 16),
  104. Text('תכונות חיוביות', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
  105. if (product.goodAttributes!.isNotEmpty)
  106. buildAttributesColumn(product.goodAttributes!, Colors.green),
  107. ],
  108. ),
  109. ),
  110. );
  111. }
  112. },
  113. );
  114. }
  115. @override
  116. void dispose() {
  117. saveAppStateForScreen('prouctDetailsView');
  118. super.dispose();
  119. }
  120. }

字符串
我试着删除图像和其他一些对象,以为这可能会有帮助,但没有成功。只有删除buildAttributesColumn函数才能起作用:

  1. Widget buildAttributesColumn(List<String> attributes, MaterialColor color) {
  2. return Directionality(
  3. textDirection: TextDirection.rtl,
  4. child: Column(
  5. crossAxisAlignment: CrossAxisAlignment.start,
  6. children: [
  7. for (String attribute in attributes)
  8. Card(
  9. margin: EdgeInsets.all(0), // No margin
  10. shape: RoundedRectangleBorder(
  11. borderRadius: BorderRadius.zero, // Sharp corners
  12. ),
  13. child: ListTile(
  14. contentPadding: EdgeInsets.symmetric(horizontal: 16),
  15. title: Text(
  16. getTitle(attribute),
  17. style: TextStyle(
  18. fontWeight: FontWeight.bold,
  19. ),
  20. ),
  21. leading: getAttributeIcon(getTitle(attribute), color), // Use getTitle to determine icon
  22. subtitle: Text(attribute),
  23. ),
  24. ),
  25. ],
  26. ),
  27. );
  28. }

dly7yett

dly7yett1#

尝试用ListView.builder Package 您的SingleChildScrollViewListView.builder自动提供滚动行为,它可能会解决您面临的问题。以下是您的代码的更新版本:

  1. class _ProductDetailsViewState extends State<ProductDetailsView> {
  2. @override
  3. Widget build(BuildContext context) {
  4. return FutureBuilder<Product>(
  5. future: getProductById(widget.barcodeValue),
  6. builder: (context, snapshot) {
  7. // ... (Your existing code)
  8. } else {
  9. Product product = snapshot.data!;
  10. return Directionality(
  11. textDirection: TextDirection.rtl,
  12. child: ListView.builder(
  13. itemCount: 1,
  14. itemBuilder: (context, index) {
  15. return Padding(
  16. padding: const EdgeInsets.all(16),
  17. child: Column(
  18. crossAxisAlignment: CrossAxisAlignment.start,
  19. children: [
  20. // ... (Your existing code)
  21. // Display bad attributes
  22. SizedBox(height: 16),
  23. Text('תכונות שליליות', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
  24. if (product.badAttributes!.isNotEmpty)
  25. buildAttributesColumn(product.badAttributes!, Colors.red),
  26. // Display good attributes
  27. SizedBox(height: 16),
  28. Text('תכונות חיוביות', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
  29. if (product.goodAttributes!.isNotEmpty)
  30. buildAttributesColumn(product.goodAttributes!, Colors.green),
  31. ],
  32. ),
  33. );
  34. },
  35. ),
  36. );
  37. }
  38. },
  39. );
  40. }
  41. // ... (Your existing code)
  42. }

字符串

  • 使用ListView.builder而不是SingleChildScrollView Package 模态底部工作表的内容。这将允许模态底部工作表更平滑地处理滚动。*
展开查看全部

相关问题