- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 ListTile 在抽屉导航上显示项目,但我很难创建 isSelected Color 并使用它将其应用于 onTap 但不断收到有关索引的错误并且应用程序无法识别onTap 上的 isSelected bool 值:
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;
}
});
这是我在 Flutter 中创建的 Navigation Drawer,如果您可以提供有关如何在 _createDrawerItem 小部件中获取 'isSelected' 并将其应用到抽屉的建议。我已经为抽屉项目设置了“isSelected”的真假,但似乎无法将其应用于 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,
),
);
}
最佳答案
您可以在下面复制粘贴运行完整代码
您可以使用 selectedIndex
来控制
在 isSelected
中传递 selectedIndex == 0
或 selectedIndex == 1
..etc
代码片段
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),
),
);
}
}
关于flutter - 如何使用 ListTile 记住和突出显示选定的抽屉项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63103775/
我有十二个指向不同类别的链接。作为用户定位的一种方式,我想强调用户现在所在的类别( - 按钮)。 如何在 CSS 中实现这一点?我读到了 selected和 active ,但我还没能让它发挥作用。
我想通过单击按钮来获取选择框中的所有选项值(选定/未选定)。我怎样才能做到这一点? 最佳答案 我认为这是使用 Traversing/map 的好机会方法: var valuesArray = $("#
我正在尝试构建一个计算器,其中包含两个数字的两个 TextView 字段。我弄清楚了如何使用“应用程序内”数字键盘输入顶部数字 Operand 1 [textView] 的数字(我知道使用 EditT
我有一个简单的 jQuery $("span.value"),它选择包含文本的节点。此文本保证为整数。如何计算所有选定节点文本的总和,并将总和放入另一个节点? 3 4 5 ? 最佳答案 你可以这样做:
我从同一台服务器上托管的一堆数据库中备份了 mysql 数据库 db1。现在只需要备份具有访问 db1 权限的选定用户,以便我可以在 db1 还原之前将这些特权用户还原到我的新服务器。 最佳答案 St
我有一个 ListView 。我想添加一个动画,如果我选择一个列表项,它将被删除,并且该项目下方的其余项目将通过向上滑动动画向上移动。我已经通过获取其子位置使用线性布局完成了此操作,但我无法理解如何向
我不明白如何使用 Python 解析来自 Outlook 的突出显示(选定)邮件? 我有这个代码,但它适用于上一封邮件。 import win32com.client outlook = win32c
在 Xcode 6 中,您现在可以为选项卡项目的选中和未选中状态设置图标。请参阅下图中的说明: 和 唯一的问题是 SELECTED 状态的图像不显示。它只是显示空白。还有其他人有这个问题吗?请看下面的
在我的数据模型中,我有一个实体组和另一个GroupMember实体。一个Group包含一个或多个GroupMembers,但一个GroupMember只能同时位于一个Group中。到目前为止没有问题,
Android Button 在不同状态(正常、按下、选中、禁用)之间移动时会更改其可绘制背景。背景切换是即时的。是否可以使其平滑(动画)? 最佳答案 是的,这是可能的。您只需为按钮添加 addAni
我使用 emacs 来查看和编辑代码和其他文本文件。我想知道是否有一种方法可以向前或向后搜索当前缓冲区中标记的文本。类似于我在记事本或写字板中可以执行的操作。就像我可以在缓冲区中标记一些文本并执行 C
如何根据状态(选定、禁用)设置自定义选择类?如何根据状态选择(选定、禁用)在自定义下拉列表中设置类?照做了,但什么也没发生。请看我的例子................................
我正在尝试检查下拉菜单中是否存在特定文本值,如果存在,我想将其属性设置为selected。 我成功编写了一个 if 语句来检查文本是否存在: var country = usr.location; i
对于我的应用程序,我想让用户能够在回收器 View 中调整 TextView 项目的文本大小(通过捏缩放或 SeekBar)。默认值应为系统设置中选择的文本大小。最小值应为系统设置中的“非常小”,最大
我正在尝试创建一个 ListBoxItem 模板,该模板在选择时将带有圆角边框。我得到了这个 xaml,它在选择时不起作用:
我正在寻找检索焦点元素的 HTML。查看 webdriver.io 文档,方法 .getActiveElement() 应该可以解决这个问题。但是,我的 IDE (WebStorm) 显示错误,指出它
我创建了一个圆,在我的 onDraw() 方法中围绕圆绘制了一条字符串和一条线(箭头)。 public class Circle extends Activity { public class
对于生产应用程序,我们希望在 Windows 窗体应用程序的 ElementHost 内显示 DatePicker,但我们遇到了 SelectedDate 和 CurrentDate 不可读的问题,因
好的,我在此处和 Google 上的许多网站上搜索了此问题的结果,但找不到针对我的问题的确切解决方案。 我有一个 sql 提取姓名和办公室。所以事情是这样的: $sql = "SELECT m
选中单元格时如何改变灰色? 最佳答案 当用户点击选中的行 (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSInd
我是一名优秀的程序员,十分优秀!