Flutter to dość ostatnich ram i jako takiej pomocy w prostych zadaniach jest dostępny. Pytam konkretnie, w jaki sposób dodam widżety kart do widgetu kolumnowego. Kod źródłowy jest podany poniżej, aby pomóc wyjaśnić, co mam na myśli.

Powiedzmy, że mam funkcję, która tworzy nową kartę, jak pokazano poniżej:

buildRow(barcode, letter, name, price) {
  return new Card(
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new ListTile(
          leading: new CircleAvatar(
            child: new Text(letter),
          ),
          title: new Text(name),
          subtitle: new Text("\$" + price),
          trailing: new Text(
            "x1",
            style: new TextStyle(color: Colors.lightBlue),
            textScaleFactor: 1.2,
          ),
        ),
      ],
    ),
  );
}
var snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
var fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
var juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");

I mam następujący ekran / strona:

class Home extends StatefulWidget {
  @override
  HomePage createState() => new HomePage();
}

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[

    ]);
  }
}

Powiemy, że wszystkie podane kod jest w tym samym pliku. Jak pójść o dodanie "przekąski", "owoc" i "sok" w dziećmi widżetów kolumn na ekranie głównym?

6
Questionare232 4 czerwiec 2018, 01:40

4 odpowiedzi

Najlepsza odpowiedź

Ok rozwiązałem mój problem, co zrobiłem, to stworzył nową listę:

List<Widget> v = [];

I wykonałeś tę listę dzieci ciała, takie jak:

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: v);
  }
}

Po którym stworzyłem funkcję, aby dołączyć tak:

buildRow(barcode, letter, name, price) {
  v.add(new Card(
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new ListTile(
          leading: new CircleAvatar(
            child: new Text(letter),
          ),
          title: new Text(name),
          subtitle: new Text("\$" + price),
          trailing: new Text(
            "x1",
            style: new TextStyle(color: Colors.lightBlue),
            textScaleFactor: 1.2,
          ),
        ),
      ], 
    ),
  ));
}

I wreszcie użyłem funkcji Setstate, aby zastosować zmiany na ekranie.

5
Questionare232 6 czerwiec 2018, 17:16

Jest to podstawowy przykład, jeśli ręcznie zaktualizujesz źródło.

      Column(
        children: _createChildren(),
      )

/////////

Jest to metoda, która tworzy listę widżetów, które karmisz do kolumny

  List<int> someList = [1, 2, 3, 4, 5];
  List<Widget> _createChildren() {
    return new List<Widget>.generate(someList.length, (int index) {
      return Text(someList[index].toString());
    });
  }

//////

Więc kiedy zaktualizujesz listę, zrób to w setState

  void _somethingHappens() {
    setState(() {
      someList.add(6);
    });
  }

Teraz, jeśli otrzymasz dane ze strumienia, możesz sprawdzić StreamBuilder, lub jeśli pochodzi z Future, możesz użyć FutureBuilder.

Ten przykład można wykonać również w regularnym Builder

12
Tree 22 październik 2018, 21:25

Powinieneś być w stanie zrobić coś takiego:

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
       buildRow("091918229292", "C", "Crackers", "\$4.00"),
       buildRow("091928229292", "P", "Pomegranate", "\$2.00"),
       buildRow("091948229292", "K", "Kiwi Juice", "\$20.00"),
    ]);
  }
} 

Jeśli naprawdę chcesz zachować referencje, które możesz zrobić:

class HomePage extends State<Home> {
  var snack;
  var fruit;
  var juice;

  @override
  void initState() {
    super.initState();

    snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
    fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
    juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");
  }

  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[
      snack, 
      fruit, 
      juice,
    ]);
  }
} 
0
QuirijnGB 3 czerwiec 2018, 23:27
class SearchCat extends StatelessWidget {
  final List<Widget> list;
  final ValueChanged onChange;

  SearchCat({this.list, this.onChange}): super();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: list.map((v) {
          return Container(
            child: v,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(57.0),
              border: Border.all(width: 1.0, color: const Color(0xff707070)),
            ),
          );
        }).toList()
      )
    );
  }
}

Możemy użyć listy.map, aby wypełnić listę widżetu.

Oto przykład, jak go używać.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SearchCat(list: [
        Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
        Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
        Text('Hello, World!', style: Theme.of(context).textTheme.headline4),
      ]
    );
  }
}

Możesz po prostu wkleić to do (trzepotanie Dartpad

0
Rachmat Gunawan 16 maj 2020, 04:26