1.FLutter Dialog setState
使用StatefulBuilder组件，使用setState1方法管理Dialog状态
showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (BuildContext context1,
void Function(void Function()) setState1) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Container(
width: 600.px,
height: 610.px,
padding: EdgeInsets.all(20.px),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.px),
color: Colors.white,
),
child: Column(
children: [
Text("创建房间"),
SizedBox(height: 20.px),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
if (roomList != null)
for (var data in roomList!)
Column(
children: [
GestureDetector(
onTap: () {
chooseType = data.type;
print(chooseType);
setState1(() {});
},
child: Container(
child: Image.network(
data.icon,
width: 230.px,
),
decoration: BoxDecoration(
border:
chooseType == data.type
? Border.all(
color: Colors
.blueAccent,
width: 3.px)
: Border()),
),
),
Text(data.name)
],
)
],
),
SizedBox(height: 40.px),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"房间名称",
),
SizedBox(
width: 30.px,
),
Container(
width: 300.px,
height: 50.px,
color: Colors.black12,
child: TextField(
decoration: InputDecoration(),
controller: textEditingController,
),
)
],
),
SizedBox(height: 40.px),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap:(){
NavigatorUtil.pop(context);
},
child: Container(
width: 220.px,
height: 80.px,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.px),
color: Colors.black12,
),
alignment: Alignment.center,
child: Text(
"取消",
style: TextStyle(color: Colors.purple),
),
),
),
SizedBox(
width: 30.px,
),
GestureDetector(
onTap: () {
if (textEditingController.text == "")
return;
if (chooseType == "") return;
_creatRoomV2(textEditingController.text);
},
child: Container(
width: 220.px,
height: 80.px,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(30.px),
color: Colors.purple,
),
alignment: Alignment.center,
child: Text("确定",
style: TextStyle(
color: Colors.white))),
)
],
),
],
)
),
),
);
},
);
});
2.Dialog被输入框挡住
使用背景颜色为透明的Scaffold组件包裹Container
核心代码：
Scaffold(
backgroundColor: Colors.transparent,
body: Center(
showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (BuildContext context1,
void Function(void Function()) setState1) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Center(
child: Container(
width: 600.px,
height: 610.px,
padding: EdgeInsets.all(20.px),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.px),
color: Colors.white,
),
child: Column(
children: [
Text("创建房间"),
SizedBox(height: 20.px),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
if (roomList != null)
for (var data in roomList!)
Column(
children: [
GestureDetector(
onTap: () {
chooseType = data.type;
print(chooseType);
setState1(() {});
},
child: Container(
child: Image.network(
data.icon,
width: 230.px,
),
decoration: BoxDecoration(
border:
chooseType == data.type
? Border.all(
color: Colors
.blueAccent,
width: 3.px)
: Border()),
),
),
Text(data.name)
],
)
],
),
SizedBox(height: 40.px),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"房间名称",
),
SizedBox(
width: 30.px,
),
Container(
width: 300.px,
height: 50.px,
color: Colors.black12,
child: TextField(
decoration: InputDecoration(),
controller: textEditingController,
),
)
],
),
SizedBox(height: 40.px),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap:(){
NavigatorUtil.pop(context);
},
child: Container(
width: 220.px,
height: 80.px,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.px),
color: Colors.black12,
),
alignment: Alignment.center,
child: Text(
"取消",
style: TextStyle(color: Colors.purple),
),
),
),
SizedBox(
width: 30.px,
),
GestureDetector(
onTap: () {
if (textEditingController.text == "")
return;
if (chooseType == "") return;
_creatRoomV2(textEditingController.text);
},
child: Container(
width: 220.px,
height: 80.px,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(30.px),
color: Colors.purple,
),
alignment: Alignment.center,
child: Text("确定",
style: TextStyle(
color: Colors.white))),
)
],
),
],
)
),
),
);
},
);
});
|