正文
19.8.8 flutter 学习之创建第一个可变的Widget
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
创建一个很简单的可变的Widget
效果就是点击字的时候会变化
完整代码：
class CarPage extends StatefulWidget {
@override
_CarState createState() {
return _CarState();
}
}
class _CarState extends State<CarPage> {
String showTitle = '今天天机很热！';
// 点击时触发方法
void clickBtn() {
setState(() {
showTitle = '那是相当的热啊';
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
margin: EdgeInsets.fromLTRB(, , , ),
child: GestureDetector(
child: Text(showTitle),
onTap: clickBtn,
),
);
}
}
下面的例子是你点击哪一行汉字的时候颜色会变深
class CarPage extends StatefulWidget {
@override
_CarState createState() {
return _CarState();
}
}
class _CarState extends State<CarPage> {
final List showTitleList = [
'原来如此',
'投影',
'不漏声色',
'蜜蜂',
'扎心',
'画',
'梦醒的夏天',
'Forever 21',
'青柠',
'昨日青空'
];
//记录选中的index
int selecteIndex = -;
// 点击时触发方法
void clickBtn() {
print('' + selecteIndex.toString());
setState(() {});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount: showTitleList.length,
itemBuilder: (context, index) {
return Center(
child: Container(
margin: EdgeInsets.only(top: ),
child: GestureDetector(
child: Text(
showTitleList[index],
style: TextStyle(fontSize: , color: index == selecteIndex ? Colors.red[] : Colors.red[]),
textAlign: TextAlign.center,
),
onTap: () {
selecteIndex = index;
print(index);
clickBtn();
},
),
),
);
});
}
}
