- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
我想在按下后更改每个图标的颜色。但是 Expandable Container
中的所有图标在按下其中一个后都会发生变化。
class _ExpandableListViewState extends State<ExpandableListView> {
bool expandFlag = false;
Color _iconColor = Colors.white;
@override
Widget build(BuildContext context) {
return new Container(
margin: new EdgeInsets.symmetric(vertical: 1.0),
child: new Column(
children: <Widget>[
new Container(
.
.
.
),
new ExpandableContainer(
expanded: expandFlag,
expandedHeight: ...
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Container(
decoration:
new BoxDecoration(border: new Border.all(width: 1.0, color: Colors.grey), color: Colors.black),
child: new ListTile(
title: ...
leading: new IconButton(
icon: Icon(Icons.star, color: _iconColor),
onPressed: () {
setState(() {
_iconColor = _iconColor == Colors.white ? Colors.yellow : Colors.white;
});
},
),
subtitle: ...
),
);
},
itemCount: ...,
))
],
),
);
}
}
class ExpandableContainer extends StatelessWidget {
final bool expanded;
final double expandedHeight;
final Widget child;
ExpandableContainer({
@required this.child,
this.expandedHeight,
this.expanded = true,
});
@override
Widget build(BuildContext context) {
.
.
.
}
完整代码:
import 'package:flutter/material.dart';
import 'data.dart';
void main() {
runApp(new MaterialApp(home: new Home()));
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey,
appBar: new AppBar(
title: new Text("Expandable List", style: TextStyle(color: Colors.black)),
backgroundColor: Colors.lightGreen,
),
body: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new ExpandableListView(title: broadcast[index].title, ind: index);
},
itemCount: broadcast.length,
),
);
}
}
class ExpandableListView extends StatefulWidget {
final String title;
final int ind;
const ExpandableListView({this.title, this.ind});
@override
_ExpandableListViewState createState() => new _ExpandableListViewState();
}
class _ExpandableListViewState extends State<ExpandableListView> {
bool expandFlag = false;
Color _iconColor = Colors.white;
@override
Widget build(BuildContext context) {
return new Container(
margin: new EdgeInsets.symmetric(vertical: 1.0),
child: new Column(
children: <Widget>[
new Container(
color: Colors.blue[300],
padding: new EdgeInsets.symmetric(horizontal: 5.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new IconButton(
icon: new Container(
height: 50.0,
width: 50.0,
decoration: new BoxDecoration(
color: Colors.deepOrange,
shape: BoxShape.circle,
),
child: new Center(
child: new Icon(
expandFlag ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
color: Colors.white,
size: 30.0,
),
),
),
onPressed: () {
setState(() {
expandFlag = !expandFlag;
});
}),
new Text(
widget.title,
style: new TextStyle(fontWeight: FontWeight.bold,fontSize: 20.0, color: Colors.black87),
)
],
),
),
new ExpandableContainer(
expanded: expandFlag,
expandedHeight: 90.0 * (broadcast[widget.ind].contents.length < 4 ? broadcast[widget.ind].contents.length : 4), // + (0.0 ?: 29.0),
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return new Container(
decoration:
new BoxDecoration(border: new Border.all(width: 1.0, color: Colors.grey), color: Colors.black),
child: new ListTile(
title: new Text(
broadcast[widget.ind].contents[index],
style: new TextStyle(fontWeight: FontWeight.bold, color: Colors.lightGreen),
textAlign: TextAlign.right,
),
leading: new IconButton(
icon: Icon(Icons.star, color: _iconColor),
onPressed: () {
setState(() {
_iconColor = _iconColor == Colors.white ? Colors.yellow : Colors.white;
});
},
),
subtitle: new Text ('${broadcast[widget.ind].team[index]}\n${broadcast[widget.ind].time[index]} ${broadcast[widget.ind].channel[index]}',
textAlign: TextAlign.right, style:TextStyle(color: Colors.white)),
isThreeLine: true,
),
);
},
itemCount: broadcast[widget.ind].contents.length,
))
],
),
);
}
}
class ExpandableContainer extends StatelessWidget {
final bool expanded;
final double expandedHeight;
final Widget child;
//final Color iconColor;
ExpandableContainer({
@required this.child,
this.expandedHeight,
this.expanded = true,
//this.iconColor,
});
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
return new AnimatedContainer(
duration: new Duration(milliseconds: 100),
curve: Curves.easeInOut,
width: screenWidth,
height: expanded ? expandedHeight : 0.0,
child: new Container(
child: child,
decoration: new BoxDecoration(border: new Border.all(width: 1.0, color: Colors.blue)),
),
);
}
}
最佳答案
您需要将列表项设为状态 _iconColor
状态列表磁贴
class StatefulListTile extends StatefulWidget {
const StatefulListTile({this.subtitle, this.title});
final String subtitle, title;
@override
_StatefulListTileState createState() => _StatefulListTileState();
}
class _StatefulListTileState extends State<StatefulListTile> {
Color _iconColor = Colors.white;
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(
border: new Border.all(width: 1.0, color: Colors.grey),
color: Colors.black),
child: new ListTile(
title: new Text(
widget?.title ?? "",
style: new TextStyle(
fontWeight: FontWeight.bold, color: Colors.lightGreen),
textAlign: TextAlign.right,
),
leading: new IconButton(
icon: Icon(Icons.star, color: _iconColor),
onPressed: () {
setState(() {
_iconColor =
_iconColor == Colors.white ? Colors.yellow : Colors.white;
});
},
),
subtitle: new Text(widget?.subtitle ?? "",
textAlign: TextAlign.right, style: TextStyle(color: Colors.white)),
isThreeLine: true,
),
);
}
}
用法
class ExpandableListView extends StatefulWidget {
final String title;
final int ind;
const ExpandableListView({this.title, this.ind});
@override
_ExpandableListViewState createState() => new _ExpandableListViewState();
}
class _ExpandableListViewState extends State<ExpandableListView> {
bool expandFlag = false;
Color _iconColor = Colors.white;
@override
Widget build(BuildContext context) {
return new Container(
margin: new EdgeInsets.symmetric(vertical: 1.0),
child: new Column(
children: <Widget>[
new Container(
color: Colors.blue[300],
padding: new EdgeInsets.symmetric(horizontal: 5.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new IconButton(
icon: new Container(
height: 50.0,
width: 50.0,
decoration: new BoxDecoration(
color: Colors.deepOrange,
shape: BoxShape.circle,
),
child: new Center(
child: new Icon(
expandFlag
? Icons.keyboard_arrow_up
: Icons.keyboard_arrow_down,
color: Colors.white,
size: 30.0,
),
),
),
onPressed: () {
setState(() {
expandFlag = !expandFlag;
});
}),
new Text(
widget.title,
style: new TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
color: Colors.black87),
)
],
),
),
new ExpandableContainer(
expanded: expandFlag,
expandedHeight: 90.0 *
(broadcast[widget.ind].contents.length < 4
? broadcast[widget.ind].contents.length
: 4), // + (0.0 ?: 29.0),
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) {
return StatefulListTile(
title: broadcast[widget.ind].contents[index],
subtitle:
'${broadcast[widget.ind].team[index]}\n${broadcast[widget.ind].time[index]} ${broadcast[widget.ind].channel[index]}',
);
},
itemCount: broadcast[widget.ind].contents.length,
))
],
),
);
}
}
关于dart - Flutter: `onPressed` 作用于 ListView 中的所有 `IconButton`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55104585/
我想在您单击 IconButton 后更改图标,然后使我的 slider 向上滑动。像这样当您单击 ListView 时 - 向上滑动当你点击 map 时-向下滑动 bool _pressAttent
我目前正在使用Flutter开发应用程序。我构建了带有IconButtons的AppBar和Bottomnavigationbar,它们应该都路由到不同的页面。当我执行时,虽然显示错误消息。 这是代码
我有一个 Container 小部件和一个 IconButton。当我按下 IconButton 时,Container 后面会显示涟漪效果。有办法解决这个问题吗? Here是完整的类,如 Githu
我正在尝试在 SizedBox 中制作一个简单的文本小部件,以响应对 AppBar 中 IconButtons 的点击。我复制了一个较早的 GridView 更新示例(由 SO 社区提供)的范例(或者
我正在尝试用 Flutter 中的一些图标制作一个简单的 AppBar 小部件,但我不断收到以下断言: The following assertion was thrown building
我有一个IconButton,当按下时波纹效果是圆形的并且比按钮的面积大,我怎样才能减少点击按钮时波纹效果的大小? IconButton( constraints
我想自定义 IconButton 的颜色,而不是使用 TopAppBar 上设置的默认值,而是使用 android.compose.material没有插槽 api 可以更改它。 Scaffo
通过阅读文档,我确信这是明确声明的,但添加图标仍然是灰色的。 class _TaskState extends State { @override Widget b
在我的应用程序中,在 appBar 中,有一个按钮可以将主题更改为深色。我需要创建功能提供者。如何实现?我只需要将脚手架颜色更改为黑色,将文本颜色更改为白色。我的 main.dart: Widget
通过阅读文档,我确信这是明确声明的,但添加图标仍然是灰色的。 class _TaskState extends State { @override Widget b
在我的应用程序中,在 appBar 中,有一个按钮可以将主题更改为深色。我需要创建功能提供者。如何实现?我只需要将脚手架颜色更改为黑色,将文本颜色更改为白色。我的 main.dart: Widget
图标需要在图标按钮内居中,否则当两者在行中间一起居中时,它们看起来会稍微偏右。 Row( children: [ IconButton( alignment: Alignmen
我怎样才能像图片中那样创建一个FloatingActionButton? 我尝试使用 FloatingActionButton,但它看起来像一个带圆圈的完整按钮。 我需要一个类似 IconButton
appBar: new AppBar( leading: Stack( children: [ IconButton( icon
我正在为我的应用程序创建一个 AppBar,但我无法在我的 CircleAvatar 按钮(这个蓝色圆圈)中插入图像: 我现在用来创建 CircleAvatar 按钮的代码如下: 主飞镖: appBa
我有一个包含多个 IconButton 的行,我需要更改它们的颜色和大小。我设法更改了颜色,但无法更改图标大小。 IconTheme( data: IconThem
我想用图标制作一个带有圆形波纹效果的按钮,我在网上看到了一些东西,但我做不到。它并不像它应该的那样直截了当。现在尝试使用此代码。 InkWell( onTa
当我设置包含 IconButton 的 Container 的颜色时,我发现 IconButton 的突出显示颜色被容器的颜色隐藏了。这就是我的意思: 如何确保蓝色圆圈出现在红色方 block 的上方
如何删除 IconButton 中的填充?我希望我的列中的项目具有相同的开始填充 Column( modifier = Modifier .fillMaxWidth()
我有这段代码: child: CircleAvatar( radius: 18, backgroundColor: Colors.white70,
我是一名优秀的程序员,十分优秀!