首页 > 解决方案 > 在运行时更改 ListTile 小部件问题

问题描述

https://pub.dev/packages/table_calendar

我使用我链接的包创建了一个日历。尝试在运行时更新 ListTile 的主要图像。我试图将数据作为字符串发送,所以每个事件都必须有一个壮观的字符串。我必须数据类将变量发送到下一页并且它正在工作但图像变量始终保持为空。希望有人能解释为什么下面的 setState 函数不起作用。谢谢。

    class Calender extends StatefulWidget {
  @override
  _CalenderState createState() => _CalenderState();
}

class Data {
  String title, image, subText, subTitle;

  Data({this.image, this.title, this.subTitle, this.subText});
}

class _CalenderState extends State<Calender> with TickerProviderStateMixin {
  Map<DateTime, List> _events;
  List _selectedEvents, names;
  String image = " ";
  AnimationController _animationController;
  CalendarController _calendarController;

  @override
  void initState() {
    print("work");
    super.initState();
    final _selectedDay = DateTime.now();
    _calendarController = CalendarController();
    _events = {
      _selectedDay: [
        'TRY 1',
      ],
      _selectedDay.add(Duration(days: 15)): ['TRY 2'],
      _selectedDay.add(Duration(days: 20)): ['TTRY 3'],
    };

    _selectedEvents = _events[_selectedDay] ?? [];
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 400));
  }

  @override
  void dispose() {
    _animationController.dispose();
    _calendarController.dispose();
    super.dispose();
  }

  void _onDaySelected(DateTime day, List events) {
    print('CALLBACK: _onDaySelected');
    setState(() {
      _selectedEvents = events;

      //working
    });
  }

  void _onVisibleDaysChanged(
      DateTime first, DateTime last, CalendarFormat format) {
    print('CALLBACK: _onVisibleDaysChanged');
  }

  void _onCalendarCreated(
      DateTime first, DateTime last, CalendarFormat format) {
    print('CALLBACK: _onCalendarCreated');
  }

  Data _data;

  Data get data {
    if (_data == null) {
      _data = Data();
    }
    return _data;
  }

  @override
  Widget build(BuildContext context) {
    names = _events.values.toList();
    //trying to  match strings with elements of list  here but not working
    setState(() {
      if (names[0] == 'TRY 1') {
        //image =
        image = 'https://www.w3schools.com/w3images/lights.jpg';
        //  'https://b.zmtcdn.com/data/pictures/5/18869335/85b9f0bc435132ec116846fafc335030.jpg';
        _data.subTitle = "8.01 PM door opening";
      }
      if (names[1] == 'TRY 2') {
        image =
            'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg';
        _data.subTitle = "8.02 PM door opening";
      }
      if (names[2] == 'TRY 3') {
        image =
            'https://previews.123rf.com/images/alexis84/alexis841404/alexis84140400557/27773925-planet-earth-and-blue-human-eye-elements-of-this-image-furnished-by-nasa-.jpg';
        _data.subTitle = "8.01 PM door opening";
      }
    });

    return SafeArea(
      child: Container(
        decoration: BoxDecoration(),
        child: Scaffold(
          body: Column(
              children: [
                _buildTableCalendar(),
                SizedBox(
                  height: 10,
                ),
                Expanded(
                  child: _buildEventList(image, data),
                )
              ],
            ),
          ),
        ),
 }

  Widget _buildTableCalendar() {
    return TableCalendar(
      calendarController: _calendarController,
      events: _events,
      startingDayOfWeek: StartingDayOfWeek.monday,
      calendarStyle: CalendarStyle(
        selectedColor: Colors.deepOrange[400],
        todayColor: Colors.deepOrange[200],
        markersColor: Colors.brown[700],
        outsideDaysVisible: false,
      ),
      headerStyle: HeaderStyle(
        formatButtonTextStyle:
            TextStyle().copyWith(color: Colors.white, fontSize: 15.0),
        formatButtonDecoration: BoxDecoration(
          color: Colors.deepOrange[400],
          borderRadius: BorderRadius.circular(16.0),
        ),
      ),
      onDaySelected: _onDaySelected,
      onVisibleDaysChanged: _onVisibleDaysChanged,
      onCalendarCreated: _onCalendarCreated,
    );
  }

  Widget _buildEventList(String image, Data data) {
    print(data.image);
    return ListView(
      children: _selectedEvents
          .map((event) => Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 0.8),
                  borderRadius: BorderRadius.circular(12.0),
                ),
                margin:
                    const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
                child: ListTile(
                  subtitle: Text("8 pm"),
                  leading: CircleAvatar(
                    //image comes here null
                    backgroundImage: NetworkImage(image),
                  ),
                  title: Text(event.toString()),
                  onTap: () {
                    setState(() {
                      if (event.toString() == "Beyond Akaretler") {
                        print("check1");
                        setState(() {
                          data.image =
                              "https://b.zmtcdn.com/data/pictures/5/18869335/85b9f0bc435132ec116846fafc335030.jpg";
                          data.title = "TRY1";
                        });
                      }
                      if (event.toString() == "Dorock XL") {
                        setState(() {
                          data.image =
                              "https://www.habervesaire.com/wp-content/uploads/2019/03/dorock-xl.jpg-1547825520-810x456.jpeg";
                          data.title = "TRY2 ";
                        });
                      }
                      if (event.toString() == "The Wall Kadıköy") {
                        setState(() {
                          data.image =
                              "https://b.zmtcdn.com/data/pictures/2/19165732/302d1418f06c81dca13e7c06bcc44ba9.jpg?fit=around|750:500&crop=750:500;*,*";
                          data.title = event.toString();
                        });
                      }
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => EventPage(
                                    data: data,
                                  )));
                    });
                  },
                ),
              ))
          .toList(),
    );
  }
}

class EventPage extends StatelessWidget {
  final Data data;

  const EventPage({Key key, this.data}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          image: DecorationImage(
              image: NetworkImage("${data.image}"), fit: BoxFit.cover)),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.black,
          title: Text("${data.title}"),
        ),
      ),
    );
  }
}

标签: flutter

解决方案


推荐阅读