#flutter #dart #flutter-layout
#трепетать #дротик #флаттер-макет
Вопрос:
Я пытаюсь построить макет с флаттером, имеющим несколько строк и столбцов, как показано ниже. Я частично достиг этого, но стили не похожи на то, что мы видим на скриншоте, а также я не уверен, являются ли виджеты, которые я использую, лучшими с точки зрения стандартов макета.
Как мы можем достичь этого стиля в флаттере? Требуются ли какие-либо изменения в коде ?
Скриншот: 
Вывод из кода флаттера: 
Код:
pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Container( padding: const pw.EdgeInsets.only(left: 20, bottom: 20), child: pw.Column( children: lt;pw.Widgetgt;[ pw.Text('Header', textScaleFactor: 2, style: pw.Theme.of(context) .defaultTextStyle .copyWith(fontWeight: pw.FontWeight.bold)), pw.Padding(padding: const pw.EdgeInsets.only(top: 10)), pw.Padding(padding: const pw.EdgeInsets.only(top: 20)), pw.Row( crossAxisAlignment: pw.CrossAxisAlignment.start, mainAxisAlignment: pw.MainAxisAlignment.spaceBetween, children: lt;pw.Widgetgt;[ pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text( '*YAT5869507*', style: const pw.TextStyle( fontSize: SharedFontSizes.headline3Mobile, ), ), pw.Text('Code :'), pw.Text('Name :'), pw.Text('Expected Date :'), pw.Text('Receipt Date :'), pw.Text('Number :'), ], ), pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('ABEL'), pw.Text('ABEL New'), pw.Text('_______________'), pw.Text('_______________'), pw.Text('_______________'), ], ), pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('ID :'), pw.Text('Time'), pw.Text('Start Time :'), pw.Text('End Time :'), ], ), pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('_______________'), pw.Text('_______________'), pw.Text('_______________'), pw.Text('_______________'), ], ), ], ), ], ), ), ], ); Комментарии:
1. Похоже, и то, и другое с одинаковым. какого еще стиля вы ожидаете от скриншота?
Ответ №1:
вы вызываете код ниже из внешней строки
pw.Text( '*YAT5869507*', style: const pw.TextStyle( fontSize: SharedFontSizes.headline3Mobile, ), ), ты звонишь вот так
pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Container( padding: const pw.EdgeInsets.only(left: 20, bottom: 20), child: pw.Column( children: lt;pw.Widgetgt;[ pw.Text('Header', textScaleFactor: 2, style: pw.Theme.of(context) .defaultTextStyle .copyWith(fontWeight: pw.FontWeight.bold)), pw.Padding(padding: const pw.EdgeInsets.only(top: 10)), pw.Padding(padding: const pw.EdgeInsets.only(top: 20)), // call from here pw.Text( '*YAT5869507*', style: const pw.TextStyle( fontSize: SharedFontSizes.headline3Mobile, ), ), pw.Row( crossAxisAlignment: pw.CrossAxisAlignment.start, mainAxisAlignment: pw.MainAxisAlignment.spaceBetween, children: lt;pw.Widgetgt;[ pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('Code :'), pw.Text('Name :'), pw.Text('Expected Date :'), pw.Text('Receipt Date :'), pw.Text('Number :'), ], ), pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('ABEL'), pw.Text('ABEL New'), pw.Text('_______________'), pw.Text('_______________'), pw.Text('_______________'), ], ), pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('ID :'), pw.Text('Time'), pw.Text('Start Time :'), pw.Text('End Time :'), ], ), pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('_______________'), pw.Text('_______________'), pw.Text('_______________'), pw.Text('_______________'), ], ), ], ), ], ), ), ], ); Ответ №2:
Не используйте этот тип структуры. В будущем, если вы вызовете API, этот тип структуры может сбить вас с толку в то время.
pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('ID :'), pw.Text('Time'), pw.Text('Start Time :'), pw.Text('End Time :'), ], ), pw.Column( crossAxisAlignment: pw.CrossAxisAlignment.start, children: lt;pw.Widgetgt;[ pw.Text('_______________'), pw.Text('_______________'), pw.Text('_______________'), pw.Text('_______________'), ], ), Вы можете использовать приведенный ниже код, как показано на рисунке. SizedBox очень помогает вам , и помимо этого вы также можете использовать расширенный виджет. (Для расширенного виджета вам не нужно помещать свойство mainAxisAlignment в виджет строки)
