Флаттер: Как удалить высоту из ExpansionPanelList?

Question

Я пытался отобразить выпадающий список, как виджет, но, к счастью, нашел виджет со списком панелей расширения, чтобы почувствовать желаемый пользовательский интерфейс.

Итак, я использую ExpansionPanelList в своем приложении флаттера, но мне не требуется стандартная высота / граница тени, с которой он поставляется.

Я понятия не имею, как его удалить, чтобы он выглядел как часть тела, а не как надземный контейнер.

В настоящее время ищите как это:

Ниже мой код:

class _PracticetestComp extends State<Practicetest> {
  var listofpracticetest;
  List<Item> _data = [
    Item(
      headerValue: 'Previous Question Papers',
      expandedValue: '',
    )
  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xffF8FDF7),
        appBar: AppBar(
          backgroundColor: Color(0xffF8FDF7), // status bar color
          brightness: Brightness.light,
          elevation: 0.0,
          leading: Container(
            margin: EdgeInsets.only(left: 17),
            child: RawMaterialButton(
              onPressed: () {
                Navigator.pushNamed(context, '/');
              },
              child: new Icon(
                Icons.keyboard_backspace,
                color: Colors.red[900],
                size: 25.0,
              ),
              shape: new CircleBorder(),
              elevation: 4.0,
              fillColor: Colors.white,
              padding: const EdgeInsets.all(5.0),
            ),
          ),
        ),
        body: Container(
          // height: 200,
          margin: EdgeInsets.only(top: 40),
          child: ListView(
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  Container(
                      margin: EdgeInsets.only(top: 30),
                      child: Theme(
                          data: Theme.of(context)
                              .copyWith(cardColor: Color(0xffF8FDF7)),
                          child: _buildPanelPreviousPapers()))
                ],
              )
            ],
          ),
        ));
  }

  Widget _buildPanelPreviousPapers() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _data[index].isExpanded = !isExpanded;
        });
      },
      children: _data.map<ExpansionPanel>((Item item) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(item.headerValue),
            );
          },
          body: Container(

            child: ListTile(
              leading: Text(
                'Alegbra',
                style:
                    TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
              ),

              ),
            ),
          ),
          isExpanded: item.isExpanded,
        );
      }).toList(),
    );
  }
}

// stores ExpansionPanel state information
class Item {
  Item({
    this.expandedValue,
    this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

Answer 1

Во-первых, не рекомендуется использовать высоту для ExpansionPanelList в соответствии со спецификацией материала c.

Однако, если вы действительно хотите это сделать, для вас есть 2 решения: либо вы создаете свой собственный ExpansionPanelList, либо готовитесь добавить пару строк в исходный файл. Я предоставляю вам последнее решение.

1. Открыть expansion_panel.dart файл, go для build() метода _ExpansionPanelListState и внести следующие изменения

   return MergeableMaterial(
     hasDividers: true,
     children: items,
     elevation: 0, // 1st add this line
   );
   

2. Теперь откройте файл mergeable_material.dart, перейдите к методу _paintShadows класса _RenderMergeableMaterialListBody и внесите следующие изменения:

   void _paintShadows(Canvas canvas, Rect rect) {
   
     // 2nd add this line
     if (boxShadows == null) return;
   
     for (final BoxShadow boxShadow in boxShadows) {
       final Paint paint = boxShadow.toPaint();
       canvas.drawRRect(kMaterialEdges[MaterialType.card].toRRect(rect), paint);
     }
   }
   

---

Снимок экрана:

Answer 2

К сожалению, высота ExpansionPanelList жестко запрограммирована, но вы можете создать тот же виджет с помощью ExpansionTile , проверьте этот пример в дартпаде.

https://dartpad.dev/0412a5ed17e28af4a46f053ef0f7a5c2

Answer 3

оберните весь дочерний элемент виджета расширения внутри Виджет материала и измените высоту, основанную на расширении дочернего элемента расширения, или нет, с помощью метода

   Material(
        elevation: isSelected ? 4 : 0,
        child: ExpansionTile(
         onExpansionChanged:(value){
                            isSelected=value;
                            setState(){};
                                   },

         title: getExpantionTitle(context),
          children: getChildrentList(),
              ),
            ),
        ),

в случае, если вам не нравится разделитель в плитке ExpansionTile сделать что-то вроде этого

        final theme = Theme.of(context).copyWith(dividerColor: 
        Colors.transparent);
     //use as a child 
 child:Theme(data: theme, child: ExpansionTile(...));