Selectable ListTile Flutter

Question

Я хочу чтобы при нажатии на ListItem текст менял цвет как здесь только на синий - https://dartpad.dev/embed-flutter.html?gh_owner=material-components&gh_repo=material-components-flutter&gh_path=docs/components/dartpad/nav_drawer/standard&gh_ref=develop

import 'package:flutter/material.dart';

void main() => runApp(USU());

int TreeIndex = 0; // ignore: non_constant_identifier_names

class USU extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        drawer: Drawer(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              DrawerHeader(
                child: Text("Drawer"),
                decoration: BoxDecoration(color: Colors.blue),
                margin: EdgeInsets.zero,
              ),
              Expanded(
                  child:TreeView()
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class TreeView extends StatefulWidget {
  _TreeView createState() => _TreeView();
}

class _TreeView extends State<TreeView> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        TreeItem(Header: "Header", selected: 1),
        TreeItem(Header: "Header", selected: 2),
      ],
    );
  }
}

class TreeItem extends StatefulWidget {
  final String Header; // ignore: non_constant_identifier_names
  final int selected;

  // ignore: non_constant_identifier_names
  const TreeItem({Key key, this.Header, this.selected}) : super(key: key);

  TreeItemState createState() => TreeItemState(selected);
}

class TreeItemState extends State<TreeItem> {
  final int select;

  TreeItemState(this.select);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(widget.Header),
      selected: TreeIndex == select,
      onTap: () =>
      {
        setState(() {
          TreeIndex = select;
        })
      },
    );
  }
}

Вот что получилось

Answer 1

Чтоб отслеживать нажатый элемент, возможно Вам удобнее будет использовать конструктор ListView.builder.

TreeItem не обязательно должен быть Stateful, т.к ему нет необходимости хранить в себе данные о том, выбран он или нет -- это ему может сказать родительский виджет(TreeView).

И лучше не передавать данные из виджета в его стейт через конструктор, как у Вас указано тут: TreeItemState createState() => TreeItemState(selected);

К полям виджета из стейта можно обратиться через widget, например widget.selected

Например, можно сделать так:

class TreeView extends StatefulWidget {
  _TreeViewState createState() => _TreeViewState();
}

class _TreeViewState extends State<TreeView> {
  final items = ['Header1', 'Header2'];
  int selectedIdx = -1;
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) =>
        GestureDetector(
          onTap: () => setState(() => selectedIdx = index),
          child: TreeItem(
            header: items[index],
            selected: selectedIdx == index)));
  }
  
}

class TreeItem extends StatelessWidget {
  final String header;
  final bool selected;

  const TreeItem({Key key, @required this.header, @required this.selected}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('$header'),
      selected: selected,
    );
  }
}

БЛОГ НА HUSL

Selectable ListTile Flutter

Ответы (1 шт):