Zastanów się, jak wyświetlić dane tablicowe w widgecie tekstowym za pomocą pętli for

Question

Mam prostą listę, na której są dostępne jakieś ciągi. Muszę tylko pokazać wszystkie ciągi znaków w widżecie Tekst za pomocą pętli for

Próbuję w ten sposób

List datesData = [{
  '09:00 am - 10:00 am',
  '10:00 am - 11:00 am',
  '11:00 am - 12:00 am',
  '12:00 am - 01:00 am',
  '01:00 am - 02:00 am',
  '02:00 am - 03:00 am',
  '03:00 am - 04:00 am',
  '04:00 am - 05:00 am'
}];

for(int i = 0; i < 8; i++){
     Container(
       child: Text(datesData(i)),
     );
}

To pokazuje błąd w datach The expression doesn't evaluate to a function, so it can't be invoked.

Również nie chcę definiować długości for lopp, tak jak for(int i = 0; i < 8; i++)muszę automatycznie sprawdzić, czy ma 8 ciągów.

Answer 1

Musisz pobrać zindeksowane dane z tablicy dat. Nieprawidłowe użycie nawiasów. Musisz użyć nawiasów kwadratowych, aby uzyskać indeks tablicy. To powinno wyglądać tak:

 for(int i = 0; i < 8; i++){
    Container(
     child: Text(datesDate[i]),
      );
    }

EDYTOWAĆ:

Ok, możesz użyć tej listy widżetów wewnątrz kolumny. Teraz będzie wyglądać tak:

  List datesData = [
    
      '09:00 am - 10:00 am',
      '10:00 am - 11:00 am',
      '11:00 am - 12:00 am',
      '12:00 am - 01:00 am',
      '01:00 am - 02:00 am',
      '02:00 am - 03:00 am',
      '03:00 am - 04:00 am',
      '04:00 am - 05:00 am'
    
  ];

  List<Widget> textWidgetList = List<Widget>(); // Here we defined a list of widget!

  @override
  Widget build(BuildContext context) {
    for (int i = 0; i < 8; i++) {
      textWidgetList.add(
        Container(
          child: Text(datesData[i]),
        ),
      );
    }

    return Scaffold(
      body: Container(
        child: Column(
          children: textWidgetList,
        ),
      ),
    );
  }

Answer 2

Możesz użyć, toListco ułatwia, a także użyć, indexOfjeśli potrzebujesz indeksu

import 'package:flutter/material.dart';

class DateDataWidget extends StatelessWidget {
  final List datesData = [
    '09:00 am - 10:00 am',
    '10:00 am - 11:00 am',
    '11:00 am - 12:00 am',
    '12:00 am - 01:00 am',
    '01:00 am - 02:00 am',
    '02:00 am - 03:00 am',
    '03:00 am - 04:00 am',
    '04:00 am - 05:00 am'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: Column(
        children: datesData.map((date) {
          int index = datesData.indexOf(date); // use index if you want.
          print(index);
          return Text(date);
        }).toList(),
      )),
    );
  }
}

Możesz użyć, int indexjeśli potrzebujesz.

Answer 3

make it more dynamic

 for(int i = 0; i < datesData.length; i++){
    Container(
     child: Text(datesDate[i]),
      );
    }

Aktualizacja Możesz pokazać za pomocą listview.builder

class MyWidget extends StatelessWidget {
  final List data = [
    '09:00 am - 10:00 am',
    '10:00 am - 11:00 am',
    '11:00 am - 12:00 am',
    '12:00 am - 01:00 am',
    '01:00 am - 02:00 am',
    '02:00 am - 03:00 am',
    '03:00 am - 04:00 am',
    '04:00 am - 05:00 am'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: data.length,
          itemBuilder: (BuildContext ctxt, int index) {
            return new Text(data[index]);
          }),
    );
  }
}

Answer 4

wypróbuj ten kod na dartpad.dev

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final List data = [
    '09:00 am - 10:00 am',
    '10:00 am - 11:00 am',
    '11:00 am - 12:00 am',
    '12:00 am - 01:00 am',
    '01:00 am - 02:00 am',
    '02:00 am - 03:00 am',
    '03:00 am - 04:00 am',
    '04:00 am - 05:00 am'
  ];
  
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: data.map((element) => ListTile(title: Text(element))).toList(),
    );
  }
}