Mam teksty i przełącznik z rzędu, dane są dobre, ale układ nie jest dobry. Próbowałem mainaxisalize.SpaCearound lub mainaxisalize.Spacebetween lub mainaxisaligment Wdrożyłem w następujący sposób Wpisz opis obrazu tutaj

Widget nagłówka

return Container(
  margin: EdgeInsets.only(top: 20),
  width: MediaQuery.of(context).size.width,
  height: 50,
  decoration: BoxDecoration(
      border: Border(
          bottom: BorderSide(
        width: 5.0,
        color: Color.fromRGBO(232, 232, 232, 1),
      )),
      color: Colors.grey),
  child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Spacer(),
        Text("S.N"),
        Spacer(),
        Text("Food Name"),
        Spacer(),
        Text("Price"),
        Spacer(),
        Text("Qty"),
        Spacer(),
        Text("Action"),
        Spacer(),
      ]),
);

Lista przedmiotów

return Container(
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          border:
              Border(bottom: BorderSide(width: 5.0, color: Colors.grey[300])),
          color: Colors.white,
        ),
        child: Wrap(
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(child: Flexible(child: Text((i + 1).toString()))),
                Container(
                  child: Flexible(
                      child: Text(
                    removeAllHtmlTags(menuList[i].name),
                    softWrap: true,
                  )),
                ),
                Container(
                  child: Flexible(
                    child: Text(
                      removeAllHtmlTags(menuList[i].discountPrice.toString()),
                    ),
                  ),
                ),
                Container(
                  child: Flexible(
                    child: Text(
                      menuList[i].maxQty.toString(),
                    ),
                  ),
                ),
                Container(
                  width: 100,
                  child: menuList[i].status == 0
                      ? Text(
                          menuList[i].foodStatus,
                          style: TextStyle(color: Colors.red),
                        )
                      : YourListViewItem(
                          id: menuList[i].id,
                          index: menuList[i].status,
                        ),
                ),
              ],
            )
          ],
        ));

Widget Yourlistviewitem.

return ListTile(
      trailing: new Switch(
        value: isSwitched,
        activeColor: Colors.green,
        activeTrackColor: Colors.green,
        inactiveThumbColor: Colors.white,
        inactiveTrackColor: Colors.grey,
        onChanged: (value) {
          setState(() {
            if (isSwitched) {
              isSwitched = false;
              isSwitched = value;
              changeFoodStatus(widget.id);
            } else {
              isSwitched = true;
              isSwitched = value;
              changeFoodStatus(widget.id);
            }
          });
        },
      ),
    );
0
Nbn 4 sierpień 2020, 08:52

1 odpowiedź

Najlepsza odpowiedź

Zamiast tego można użyć widgetu Table, oszczędza stres gniazdowania Columns i Rows, a także podawanie ustalonych rozmiarów do widgetów, aby dopasować ekrany urządzeń.

Przeczytaj więcej o widgetie Table tutaj: Klasa tabeli

Dodałem demo za pomocą widgetu jako przykładu:

  1. Dodaj fragment kodu poniżej jako zmienną, aby nadać przestrzeni rzędów tabeli
// add this as a variable to gives the table rows spacing 
final TableRow rowSpacer = TableRow(children: [
    SizedBox(
      height: 15,
    ),
    SizedBox(
      height: 15,
    ),
    SizedBox(
      height: 15,
    ),
    SizedBox(
      height: 15,
    ),
    SizedBox(
      height: 15,
    ),
  ]);
  1. Dołącz to na drzewie widgetu, aby zobaczyć widget Table w akcji
// add this in your widget tree
 Table(
                // give each column in the table a fraction (to adapt to various screen sizes)
                columnWidths: {
                  0: FractionColumnWidth(.1),
                  1: FractionColumnWidth(.4),
                  2: FractionColumnWidth(.2),
                  3: FractionColumnWidth(.15),
                  4: FractionColumnWidth(.2)
                },
                children: [
                  // first table row
                  TableRow(
                    children: [
                      Text('S.N'),
                      Text('Food Name'),
                      Text('Price'),
                      Text('Qty'),
                      Text('Action'),
                    ],
                  ),
                  // space each row
                  rowSpacer,
                  // first table row
                  TableRow(
                    children: [
                      Text('1'),
                      Text('Burger'),
                      Text('180'),
                      Text('10'),
                      SizedBox(
                        height: 20,
                        child: Switch(
                          value: true,
                          onChanged: (val) {},
                        ),
                      ),
                    ],
                  ),

                  // space each row
                  rowSpacer,
                  // third table row
                  TableRow(
                    children: [
                      Text('2'),
                      Text('Chilli Momo'),
                      Text('140'),
                      Text('5'),
                      SizedBox(
                        height: 20,
                        child: Switch(
                          value: true,
                          onChanged: (val) {},
                        ),
                      ),
                    ],
                  ),

                  // .... // add other rows here
                ],
              ),

WYNIK:

img

1
void 4 sierpień 2020, 06:24