如何在Flutter中的showmodalsheet中更新小部件颜色？
我是flutter的新手，我希望按下时更改窗口小部件的边框颜色，我尝试使用setState（）进行尝试，但它根本不会影响要使用其他功能来更改flutter中的窗口小部件颜色？如果可以的话，有人可以向我展示如何使用它的示例吗？谢谢，希望有人能帮忙
showModalBottomSheet（ backgroundColor：颜色（0xff086375）， 上下文：上下文，
isScrollControlled: true,
builder: (BuildContext context){
return Container(
padding: const EdgeInsets.symmetric(horizontal: 18),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 8.0,
),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"PHP ",
style:
TextStyle(color: Colors.white, fontSize: 20),
),
Container(
width: 40,
child: TextField(
cursorColor: Colors.white,
cursorWidth: 2,
keyboardType: TextInputType.number,
style: TextStyle(color: Colors.white),
decoration: InputDecoration.collapsed(
hintText: '0.00',
hintStyle: TextStyle(
color: Colors.white70, fontSize: 20)),
autofocus: true,
),
),
],
),
Container(
child: Text(
"PAYMENT FOR " + selectedExpense,
style: TextStyle(color: Colors.white70),
),
),
Container(
color: Color(0xff086375),
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: IconButton(
icon: Icon(FontAwesomeIcons.utensils),
color: Colors.orange,
onPressed: () {
setState(() {
selectedExpense = "FOOD";
isFoodseleted = true;
isTransportationseletced = false;
isGroceriesselected = false;
isAccomodationselected = false;
isDrinksselected = false;
isOhterselected = false;
});
},
),
width: 50,
height: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5,
color: isFoodseleted
? Colors.white
: Color(0xff086375))),
),
),
Container(
child: IconButton(
icon: Icon(FontAwesomeIcons.bus),
color: Colors.yellow,
onPressed: () {
setState(() {
selectedExpense = "TRANSPORTATION";
isFoodseleted = false;
isTransportationseletced = true;
isGroceriesselected = false;
isAccomodationselected = false;
isDrinksselected = false;
isOhterselected = false;
});
},
),
width: 50,
height: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5,
color: isTransportationseletced
? Colors.white
: Color(0xff086375)))),
),
Container(
child: IconButton(
icon: Icon(FontAwesomeIcons.shoppingCart),
color: Colors.lightBlue,
onPressed: () {
setState(() {
selectedExpense = "GROCERIES";
isFoodseleted = false;
isTransportationseletced = false;
isGroceriesselected = true;
isAccomodationselected = false;
isDrinksselected = false;
isOhterselected = false;
});
},
),
width: 50,
height: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5,
color: isGroceriesselected
? Colors.white
: Color(0xff086375)))),
),
Container(
child: IconButton(
icon: Icon(FontAwesomeIcons.bed),
color: Colors.green,
onPressed: () {
setState(() {
selectedExpense = "ACCOMODATION";
isFoodseleted = false;
isTransportationseletced = false;
isGroceriesselected = false;
isAccomodationselected = true;
isDrinksselected = false;
isOhterselected = false;
});
},
),
width: 50,
height: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5,
color: isAccomodationselected
? Colors.white
: Color(0xff086375)))),
),
Container(
child: IconButton(
icon: Icon(FontAwesomeIcons.glassMartini),
color: Colors.red,
onPressed: () {
setState(() {
selectedExpense = "DRINKS";
isFoodseleted = false;
isTransportationseletced = false;
isGroceriesselected = false;
isAccomodationselected = false;
isDrinksselected = true;
isOhterselected = false;
});
},
),
width: 50,
height: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5,
color: isDrinksselected
? Colors.white
: Color(0xff086375)))),
),
Container(
child: IconButton(
icon: Icon(FontAwesomeIcons.plusCircle),
color: Colors.amber,
onPressed: () {
setState(() {
selectedExpense = "OTHERS";
isFoodseleted = false;
isTransportationseletced = false;
isGroceriesselected = false;
isAccomodationselected = false;
isDrinksselected = false;
isOhterselected = true;
});
},
),
width: 50,
height: 40,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
width: 5,
color: isOhterselected
? Colors.white
: Color(0xff086375)))),
)
],
),
)
],
),
),
SizedBox(height: 10),
],
),
);
}
)
3 个答案:
答案 0 :(得分：1)
只需按照以下步骤更改所有IconButtonMethods，
IconButton(
icon: Icon(FontAwesomeIcons.glassMartini),
color: isDrinksselected
? Colors.white
: Color(0xff086375),
onPressed: () {
// statements
}
)
您正在将颜色更改条件添加到根容器中。
我认为您想更改新闻发布会上图标的颜色。
因此，用于颜色更改的三元运算符（“？：”）条件应该是IconButton颜色而不是容器颜色。
只需将其添加到所有IconButton color属性上，您就可以开始使用
。答案 1 :(得分：0)
也许您可以将其应用于您的解决方案：
Color color = new Color(0xffb74093);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: color,
child: Container(
width: MediaQuery.of(context).size.width,
height: 200,
child: Column(
children: <Widget>[
FlatButton(
color: Colors.blue,
onPressed: (){
setColor(Colors.blue);
}
),
FlatButton(
color: Colors.red,
onPressed: (){
setColor(Colors.red);
}
),
],
),
),
),
);
}
Color setColor(Color newColor){
setState(() {
color = newColor;
});
}
答案 2 :(得分：0)
以下是您可以参考的示例：
points.dist = function() {
var p1 = this[0];
var p2 = this[1];
var a = p2.x-p1.x;
var b = p2.y-p1.y;
return Math.sqrt(a*a + b*b);
};
console.log(points.dist())
用于分发更改，ValueNotifier<Color>用于使用更改。
请参考以下代码：
ValueListenableBuilder<Color>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？