Блог

Главная - Вопросы по программированию - Панель расширения с заголовками выровнена неправильно

Панель расширения с заголовками выровнена неправильно

#flutter #flutter-layout

#трепетать #флаттер-макет

Вопрос:

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

Это то, что у меня есть:

 class TestPanel extends StatefulWidget {  const TestPanel({Key? key}) : super(key: key);   @override  _TestPanelState createState() =gt; _TestPanelState(); }  class _TestPanelState extends Statelt;TestPanelgt; {  bool _customTileExpanded = false;   @override  Widget build(BuildContext context) {  return Container(  padding: EdgeInsets.all(10),  child: Column(  children: [  Padding(  padding: const EdgeInsets.all(8.0),  child: Row(  children: const lt;Widgetgt;[  Expanded(  child: Text("Header 1"),  ),  Expanded(  child: Text("Some Header 2"),  ),  Expanded(  child: Text(""),  )  ],  ),  ),  Expanded(  child: ListView.builder(  itemCount: 1,  itemBuilder: (BuildContext context, int index) {  return ExpansionPanelList(  animationDuration: Duration(milliseconds: 1000),  dividerColor: Colors.grey,  elevation: 1,  children: [  ExpansionPanel(  body: Container(  padding: EdgeInsets.all(10),  child: Column(  mainAxisAlignment: MainAxisAlignment.spaceBetween,  crossAxisAlignment: CrossAxisAlignment.start,  children: lt;Widgetgt;[  Text(  "Some text here",  style: TextStyle(  color: Colors.grey[700],  fontSize: 15,  letterSpacing: 0.3,  height: 1.3),  ),  ],  ),  ),  headerBuilder: (BuildContext context, bool isExpanded) {  return Container(  padding: EdgeInsets.all(10),  child: Row(  children: const lt;Widgetgt;[  Expanded(  child: Text("Value 1"),  ),  Expanded(  child: Text("Some Value 2"),  ),  ],  ),  );  },  isExpanded: _customTileExpanded,  )  ],  expansionCallback: (int item, bool expanded) {  setState(() =gt; _customTileExpanded = !expanded);  },  );  },  ),  ),  ],  ),  );  } }

Теперь это приводит к:

введите описание изображения здесь

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

Комментарии:

1. Вы ссылаетесь Some Value 2 и Some Text here выравниваете?

2. Да, действительно. Я хочу, чтобы поведение было таким же, как у DataTable, но с расширяемыми строками. Таким образом, Некоторое значение 2 должно начинаться так же, как и некоторый заголовок 2.

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

4. Это была моя первая попытка, но, похоже, удалить значок невозможно.

Ответ №1:

Здесь есть хитрое решение, добавив SizedBox с той же шириной значка ExpansionPanelList «включая заполнение» в конце строки заголовка, как показано ниже:

 Row(  children: [  Expanded(  child: Row(  children: const lt;Widgetgt;[  Expanded(  child: Text("Header 1"),  ),  Expanded(  child: Text("Some Header 2"),  ),  ],  ),  ),  // If the Header text "Some Header 2" is longer than the Expansion Header "Some Value 2" you'll need to increase the Sizedbox width.  const SizedBox(  64, //ExpansionPanelList IconContainer size: end margin 8   padding 16*2   size 24  ),  ],  ),

Кроме того, я не знаю, сработает ли это с вашей идеей, но у вас может быть динамическая высота строк с DataTable2 пакетом, но сначала вам нужно скопировать код пакета и вставить его в корневой каталог вашего текущего проекта, чтобы внести в него некоторые изменения «Чтобы сделать высоту строки динамической».:

  1. За то, что динамическая высота строки удалена height: effectiveDataRowHeight и height: effectiveHeadingRowHeight из нового файла виджета.
  2. Вы можете добавить constraints: BoxConstraints(minHeight: effectiveHeadingRowHeight,) и constraints: BoxConstraints(minHeight: effectiveDataRowHeight,) вместо выше и использовать dataRowHeight параметр в качестве минимальной высоты и то же самое для headingRowHeight .
  3. Чтобы центрировать все данные в ячейках, добавьте defaultVerticalAlignment: TableCellVerticalAlignment.middle var dataRows в код виджета.

Результат: Изображение

Вы также можете сделать то же самое с классом DataTable, но на шаге 3 вам нужно добавить defaultVerticalAlignment: TableCellVerticalAlignment.middle к Table дочернему элементу в образе: Изображение

Я предпочитаю использовать DataTable2, так как он имеет больше настроек, вы можете найти его здесь: DataTable2

После этого Вы можете добавить значок в конце строки. Если он нажат, вы добавляете новую строку с дополнительной информацией.

Метки: