如何在flutter中将容器小部件转换为ExpansionPanelList小部件

oipij1gg  于 2022-11-17  发布在  Flutter
关注(0)|答案(2)|浏览(206)

这是我的容器小部件和装饰

Container(
    height: 90,
    width: 150,
    decoration: const BoxDecoration(
      color: Colors.grey,
      borderRadius: BorderRadius.all(Radius.circular(30)),
      boxShadow: [
        BoxShadow(
          color: Colors.black,
          offset: Offset(0.0, 0.0),
          blurRadius: 14.0,
          spreadRadius: -15,
        ), //BoxShadow
      ],
    ),
  );

我需要用相同的装饰执行ExpansionPanelList

但当我这么做的时候

我如何在容器内部创建这个样式?2或者我如何将扩展面板部件创建成这个样式?
下面是我扩展列表代码

ExpansionPanelList.radio(
        children: taskList
            .map((task) => ExpansionPanelRadio(
                  value: task,
                  headerBuilder: (context, isOpen) =>
                      TaskTile(task: task, taskList: taskList),
                  body: const Text('ss'),
                ))
            .toList());

TaskTile是任务平铺小部件,包含展开面板内的小部件
如何实现这一点?

woobm2wo

woobm2wo1#

这是你想要的扩展列表:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Expansion Panel List';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

// stores ExpansionPanel state information
class Item {
  Item({
    required this.id,
    required this.expandedValue,
    required this.headerValue,
    this.checkValue = false,
    this.isExpanded = false,
  });
  int id;
  String expandedValue;
  String headerValue;
  bool isExpanded;
  bool checkValue;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    return Item(
      id: index,
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.all(Radius.circular(30)),
          boxShadow: [
            BoxShadow(
              color: Colors.black,
              offset: Offset(0.0, 0.0),
              blurRadius: 14.0,
              spreadRadius: -15,
            ), //BoxShadow
          ],
        ),
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      initialOpenPanelValue: 1,
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanelRadio(
          value: item.id,
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Row(
                children: [
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        // Toggle check value when tapped.
                        item.checkValue = !item.checkValue;
                      });
                    },
                    child: Icon(
                        item.checkValue ? Icons.check_box : Icons.check_box_outline_blank_rounded,
                        color: Colors.lightBlue,
                    ),
                  ),
                  const SizedBox(width: 10),
                  Text(item.headerValue,
                  style: TextStyle(decoration: item.checkValue ? TextDecoration.lineThrough : null),
                  )
                ],
              ),
            );
          },
          body: ListTile(
              title: Text(item.expandedValue),
              subtitle:
              const Text('To delete this panel, tap the trash can icon'),
              trailing: const Icon(Icons.delete),
              onTap: () {
                setState(() {
                  _data.removeWhere((Item currentItem) => item == currentItem);
                });
              }),
          // isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

如果你想添加更多的项目,即日期,你可以通过在TaskFile类中添加它来完成,对于样式,你也可以在该类中完成,如果你想在扩展列表中填充,那么,给予你想要的列表的形式。

bvjveswy

bvjveswy2#

我有一个类似的问题之前,当我创建一个Flutter应用程序,然后我意识到这是更有效的,使用MediaQuery而不是给数字,即.

height:  MediaQuery.of(context).size.height*10,
width:  MediaQuery.of(context).size.width*80,

这是一个例子,我希望你能解决这个问题。

相关问题