如何在 flutter 中将图像添加到 ExpantionTile

Question

我一直在开发一个应用程序，其中 我想在 ExpansionTile 函数中添加一个图像 但要注意的是 flutter 不允许我们在其中添加图片。

作为参考，这就是我要实现的，完全相同的 UI 也已在 Myntra 应用程序上实现。

Check out Myntra UI here: https://vimeo.com/707250315

我已经尝试为此寻找一些替代方案，我发现 expandable package 可以做同样的事情，但并不是我想要实现的。 我暂时实现了这个:

如果你们中的任何人以前实现过这个UI，我很想看看它是如何实现的。

Answer 1

在我对此解决方案的研究中，我得出结论 AnimatedContainer() 最适合主图块。第一个片段是通用小部件。最后，我建模了一个 Map 列表，表示可能的 JSON 响应

import 'package:flutter/material.dart';

import '/widgets/category_item.dart';

class CategoriesPage extends StatefulWidget {
  const CategoriesPage({Key? key}) : super(key: key);

  @override
  State<CategoriesPage> createState() => _CategoriesPageState();
}

class _CategoriesPageState extends State<CategoriesPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _products.length,
        itemBuilder: (ctx, index) => CategoryItem(product: _products[index]),
      ),
    );
  }
}

List<Map<String, dynamic>> _products = [
  {
    'categoryTitle': 'Summer Shop',
    'categoryDescription': 'Turn up the heat in style',
    'categoryImage':
        'https://images.unsplash.com/photo-1600566752355-35792bedcfea?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8YmF0aHJvb218ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60',
    'subCategory': [
      {'categ': 'Top Brands'},
      {'categ': 'Men'},
      {'categ': 'Women'},
      {'categ': 'Kids'},
      {'categ': 'Footware'},
      {'categ': 'Accessories'},
      {'categ': 'Jewellery'},
      {'categ': 'Beauty'},
    ],
  },
  {
    'categoryTitle': 'Men',
    'categoryDescription': 'T-shorts, Shirts,Jeans,Accessories',
    'categoryImage':
        'https://images.unsplash.com/photo-1603825491103-bd638b1873b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YmF0aHJvb218ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60',
    'subCategory': [
      {'categ': 'Top Brands'},
      {'categ': 'Men'},
      {'categ': 'Women'},
      {'categ': 'Kids'},
      {'categ': 'Footware'},
      {'categ': 'Accessories'},
      {'categ': 'Jewellery'},
      {'categ': 'Beauty'},
    ],
  },
  {
    'categoryTitle': 'Women',
    'categoryDescription': 'T-shorts, Shirts,Jeans,Accessories',
    'categoryImage':
        'https://images.unsplash.com/photo-1603825491103-bd638b1873b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YmF0aHJvb218ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60',
    'subCategory': [
      {'categ': 'Top Brands'},
      {'categ': 'Men'},
      {'categ': 'Women'},
      {'categ': 'Kids'},
      {'categ': 'Footware'},
      {'categ': 'Accessories'},
      {'categ': 'Jewellery'},
      {'categ': 'Beauty'},
    ],
  },
  {
    'categoryTitle': 'Kids',
    'categoryDescription': 'T-shorts, Shirts,Jeans,Accessories',
    'categoryImage':
        'https://images.unsplash.com/photo-1603825491103-bd638b1873b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8YmF0aHJvb218ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60',
    'subCategory': [
      {'categ': 'Top Brands'},
      {'categ': 'Men'},
      {'categ': 'Women'},
      {'categ': 'Kids'},
      {'categ': 'Footware'},
      {'categ': 'Accessories'},
      {'categ': 'Jewellery'},
      {'categ': 'Beauty'},
    ],
  },
];

这是构建器部分。使用可扩展包更新

import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

class CategoryItem extends StatefulWidget {
  final Map<String, dynamic> product;
  const CategoryItem({required this.product, Key? key}) : super(key: key);

  @override
  State<CategoryItem> createState() => _CategoryItemState();
}

class _CategoryItemState extends State<CategoryItem> {
  final _controller = ExpandableController();

  @override
  Widget build(BuildContext context) {
    final deviceSize = MediaQuery.of(context).size;

    return ExpandablePanel(
      controller: _controller,
      theme: const ExpandableThemeData(hasIcon: false),
      header: Container(
        height: deviceSize.height * .13,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage(widget.product['categoryImage']),
          ),
        ),
      ),
      collapsed: const SizedBox(height: 0),
      expanded: ListView.builder(
        shrinkWrap: true,
        physics: const BouncingScrollPhysics(),
        itemCount: widget.product['subCategory'].length,
        itemBuilder: (ctx, index) => ExpansionTile(
          childrenPadding: const EdgeInsets.symmetric(vertical: 5),
          title: Text(widget.product['subCategory'][index]['categ']),
          children: List<Widget>.generate(
            widget.product['subCategory'].length,
            (index) => Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(widget.product['subCategory'][index]['categ']),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

如何在 flutter 中将图像添加到 ExpantionTile

How to add image to ExpantionTile in flutter

flutter

dart

flutter-layout

flutter-dependencies