Flutter 如何使用ListTile记住并突出显示选定的抽屉项目？_Flutter_Listview_Colors_Navigation_Drawer

Flutter 如何使用ListTile记住并突出显示选定的抽屉项目？

flutter listview colors navigation

Flutter 如何使用ListTile记住并突出显示选定的抽屉项目？,flutter,listview,colors,navigation,drawer,Flutter,Listview,Colors,Navigation,Drawer,我正在使用ListTile在导航抽屉上显示项目，但我很难创建isSelected颜色，并已使用此颜色将其应用于onTap，但不断出现索引错误，应用程序无法识别onTap上的isSelected颜色： for(int i = 0; i < isSelected.length; i++){ setState(() { if (index == i) {

我正在使用ListTile在导航抽屉上显示项目，但我很难创建isSelected颜色，并已使用此颜色将其应用于onTap，但不断出现索引错误，应用程序无法识别onTap上的isSelected颜色：

  for(int i = 0; i < isSelected.length; i++){
                    setState(() {
                       if (index == i) {
                          isSelected[index] = true;
                       } else {                               //the condition to change the highlighted item
                          isSelected[i] = false;
                       }
                     });

for（int i=0；i


这是我创建的Flatter中的导航抽屉，如果你能给出建议，如何在_createDrawerItem小部件中获取“isSelected”并将其应用于抽屉。我已经将抽屉项的“isSelected”设置为true和false，但似乎无法将其应用于onTap
class NavDraw extends StatefulWidget {
  @override
  _NavDrawState createState() => _NavDrawState();

}

class _NavDrawState extends State<NavDraw> {

  @override
  void initState() {

    super.initState();

  }

  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        child: ListView(
          children: <Widget> [
          Container(
              height: 100.0,
              color: Color(0xff2B4DB9),
              child: DrawerHeader(
                  margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                  padding: EdgeInsets.zero,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          fit: BoxFit.none,
                          image:  AssetImage('images/drawer_header.png')))),
            ),
          _createDrawerItem(
        icon: Icons.timer,
    text: 'Timer',
      isSelected: true,
      onTap: () =>
      Navigator.pushReplacementNamed(context, Routes.home)),
        _createDrawerItem(
        icon: Icons.history,
        text: 'History',
            isSelected: false,
            onTap: () =>
            Navigator.pushReplacementNamed(context, Routes.history)),
      _createDrawerItem(
        icon: Icons.help,
        text: 'Help & Support',
          isSelected: false,
          onTap: () =>
            Navigator.pushReplacementNamed(context, Routes.help_and_support)),
      _createDrawerItem(
        icon: Icons.rate_review,
        text: 'Write a Review',
          isSelected: false,
          onTap: () =>
            Navigator.pushReplacementNamed(context, Routes.write_a_review)),
      Divider(),
    ],
    ),
      ),
    );
  }
}


Widget _createDrawerItem(
{IconData icon, String text, GestureTapCallback onTap, bool isSelected}) {
  return Ink(
    color: isSelected ? Color(0xffE3EAFF) : Colors.transparent,
    child: ListTile(
      selected: true,
      hoverColor: Colors.white,
      title: Row(
      children: <Widget>[
      Icon(icon),
      Padding(
      padding: EdgeInsets.only(left: 8.0),
      child: Text(text),
      )
      ],
      ),
      onTap: onTap,
      ),
  );
}

类NavDraw扩展StatefulWidget{
@凌驾
_NavDrawState createState（）；
}
类_NavDrawState扩展状态{
@凌驾
void initState（）{
super.initState（）；
}
小部件构建（构建上下文）{
回程抽屉(
子：容器(
子：ListView(
儿童：[
容器(
高度：100.0，
颜色：颜色（0xff2B4DB9），
儿童：抽屉阅读器(
边距：从LTRB（0,0,0,0）开始的边距集，
填充：EdgeInsets.zero，
装饰：盒子装饰(
图像：装饰图像(
适合：BoxFit.none，
image:AssetImage（'images/drawer\u header.png'），
),
_创造者(
图标：Icons.timer，
文本：“计时器”，
是的，
onTap:（）=>
Navigator.pushReplacementNamed（上下文，Routes.home）），
_创造者(
图标：Icons.history，
正文：“历史”，
选：错，
onTap:（）=>
Navigator.pushReplacementNamed（上下文，Routes.history）），
_创造者(
icon:Icons.help，
文本：“帮助和支持”，
选：错，
onTap:（）=>
Navigator.pushReplacementNamed（上下文、Routes.help和支持）），
_创造者(
图标：Icons.rate_review，
文字：“写一篇评论”，
选：错，
onTap:（）=>
Navigator.pushReplacementNamed（上下文，Routes.write_a_review）），
分隔符（），
],
),
),
);
}
}
小部件_createDrawerItem(
{IconData图标、字符串文本、GestureTapCallback onTap、布尔isSelected}）{
回墨(
颜色：isSelected？颜色（0xffE3EAFF）：颜色。透明，
孩子：ListTile(
选择：正确，
hoverColor:Colors.white，
标题：世界其他地区(
儿童：[
图标（图标），
填充物(
填充：仅限边缘设置（左：8.0），
子：文本（Text），
)
],
),
onTap:onTap，
),
);
}
您可以复制粘贴运行下面的完整代码

您可以使用selectedIndex
来控制

在isSelected
passselectedIndex==0
或selectedIndex==1
。等

代码片段
int selectedIndex = 0;
...
_createDrawerItem(
                icon: Icons.timer,
                text: 'Timer',
                isSelected: selectedIndex == 0,
                onTap: () {
                  setState(() {
                    selectedIndex = 0;
                  });

                  Navigator.pushReplacementNamed(context, "/page0");
                }),

工作演示

完整代码
import 'package:flutter/material.dart';

class NavDraw extends StatefulWidget {
  @override
  _NavDrawState createState() => _NavDrawState();
}

int selectedIndex = 0;

class _NavDrawState extends State<NavDraw> {

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        child: ListView(
          children: <Widget>[
            Container(
              height: 100.0,
              color: Color(0xff2B4DB9),
              child: DrawerHeader(
                  margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                  padding: EdgeInsets.zero,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          fit: BoxFit.none,
                          image: NetworkImage(
                              'https://picsum.photos/250?image=9')))),
            ),
            _createDrawerItem(
                icon: Icons.timer,
                text: 'Timer',
                isSelected: selectedIndex == 0,
                onTap: () {
                  setState(() {
                    selectedIndex = 0;
                  });

                  Navigator.pushReplacementNamed(context, "/page0");
                }),
            _createDrawerItem(
                icon: Icons.history,
                text: 'History',
                isSelected: selectedIndex == 1,
                onTap: () {
                  setState(() {
                    selectedIndex = 1;
                  });

                  Navigator.pushReplacementNamed(context, "/page1");
                }),
            _createDrawerItem(
                icon: Icons.help,
                text: 'Help & Support',
                isSelected: selectedIndex == 2,
                onTap: () {
                  setState(() {
                    selectedIndex = 2;
                  });

                  Navigator.pushReplacementNamed(context, "/page2");
                }),
            _createDrawerItem(
                icon: Icons.rate_review,
                text: 'Write a Review',
                isSelected: selectedIndex == 3,
                onTap: () {
                  setState(() {
                    selectedIndex = 3;
                  });

                  Navigator.pushReplacementNamed(context, "/page3");
                }),
            Divider(),
          ],
        ),
      ),
    );
  }
}

Widget _createDrawerItem(
    {IconData icon, String text, GestureTapCallback onTap, bool isSelected}) {
  return Ink(
    color: isSelected ? Color(0xffE3EAFF) : Colors.transparent,
    child: ListTile(
      selected: true,
      hoverColor: Colors.white,
      title: Row(
        children: <Widget>[
          Icon(icon),
          Padding(
            padding: EdgeInsets.only(left: 8.0),
            child: Text(text),
          )
        ],
      ),
      onTap: onTap,
    ),
  );
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/page0',
      routes: {
        '/page0': (context) => Page0(),
        '/page1': (context) => Page1(),
        '/page2': (context) => Page2(),
        '/page3': (context) => Page3(),
      },
    );
  }
}

class Page0 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: NavDraw(),
        appBar: AppBar(
          title: Text("page 0"),
        ),
        body: Text("page 0"));
    ;
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: NavDraw(),
        appBar: AppBar(
          title: Text("page 1"),
        ),
        body: Text("page 1"));
    ;
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: NavDraw(),
        appBar: AppBar(
          title: Text("page 2"),
        ),
        body: Text("page 2"));
    ;
  }
}

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: NavDraw(),
        appBar: AppBar(
          title: Text("page 3"),
        ),
        body: Text("page 3"));
    ;
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      drawer: NavDraw(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类NavDraw扩展StatefulWidget{
@凌驾
_NavDrawState createState（）；
}
int selectedIndex=0；
类_NavDrawState扩展状态{
@凌驾
小部件构建（构建上下文）{
回程抽屉(
子：容器(
子：ListView(
儿童：[
容器(
高度：100.0，
颜色：颜色（0xff2B4DB9），
儿童：抽屉阅读器(
边距：从LTRB（0,0,0,0）开始的边距集，
填充：EdgeInsets.zero，
装饰：盒子装饰(
图像：装饰图像(
适合：BoxFit.none，
图片：NetworkImage(
'https://picsum.photos/250?image=9')))),
),
_创造者(
图标：Icons.timer，
文本：“计时器”，
isSelected:selectedIndex==0，
onTap:（）{
设置状态（）{
selectedIndex=0；
});
Navigator.pushReplacementNamed（上下文，“/page0”）；
}),
_创造者(
图标：Icons.history，
正文：“历史”，
isSelected:selectedIndex==1，
onTap:（）{
设置状态（）{
selectedIndex=1；
});
Navigator.pushReplacementNamed（上下文，“/page1”）；
}),
_创造者(
icon:Icons.help，
文本：“帮助和支持”，
isSelected:selectedIndex==2，
onTap:（）{
设置状态（）{
选择指数=2；
});
Navigator.pushReplacementNamed（上下文，“/page2”）；
}),
_创造者(
图标：Icons.rate_review，
文字：“写一篇评论”，
isSelected:selectedIndex==3，
onTap:（）{
设置状态（）{
选择指数=3；
});
Navigator.pushReplacementNamed（上下文，“/page3”）；
}),
分隔符（），
],
),
),
);
}
}
小部件_createDrawerItem(
{IconData图标、字符串文本、GestureTapCallback onTap、布尔isSelected}）{
回墨(
颜色：isSelected？颜色（0xffE3EAFF）：颜色。透明，
孩子：ListTile(