构建方法内部👇🏽
Widget build(BuildContext context) {
final provider = Provider.of<StateProvider>(context, listen: false);
// Get the selected question details from the StateProvider
final selectedQuestion = provider.selectedQuestion;
// Check if the question is disabled
final bool isQuestionDisabled = selectedQuestion['isActive'];
return Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
leading: IconButton(
icon: SvgPicture.asset('assets/icons/left_arrow.svg'),
onPressed: () {
Navigator.pushNamedAndRemoveUntil(
context,
Provider.of<StateProvider>(context, listen: false).selectedRoute,
(route) => false, // Remove all routes in the stack
);
},
),
actions: const [
Padding(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Text(
'+3 Guidos online',
style: TextStyle(
color: Color(0xFF00FF38),
fontSize: 10,
fontWeight: FontWeight.w400),
),
)
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.only(top: 8),
color: const Color(0xFF191919),
child: questions(
selectedQuestion['title'],
selectedQuestion['description'],
selectedQuestion['tags'][0],
selectedQuestion['priority'],
selectedQuestion['timeLeft'].toString(),
),
),
Expanded(
child: RefreshIndicator(
onRefresh: _reloadChatMessages,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Align(
alignment: Alignment.bottomCenter,
child: Image.asset(
'assets/images/community.png',
height: 306,
),
),
const Align(
alignment: Alignment.topCenter,
child: Padding(
padding:
EdgeInsets.symmetric(vertical: 20, horizontal: 50),
child: Text(
'Help out your peer Exploro and earn rewards',
style: TextStyle(
color: Color(0xFF818181),
fontSize: 16,
fontWeight: FontWeight.w600),
textAlign: TextAlign.center,
),
),
),
ListView.builder(
padding: EdgeInsets.symmetric(horizontal: 5),
reverse: true,
itemCount: _messages.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return _isRefreshing
? Container(
height: 80.0,
child: Center(
child: CircularProgressIndicator(),
),
)
: SizedBox.shrink();
} else {
final message = _messages[index - 1];
final firebaseUser = FirebaseAuth.instance.currentUser;
final userUid = firebaseUser?.uid ?? '';
final isUserMessage = message['user'] == userUid;
return isUserMessage
? SendMesage(
proPic: message['profileImage'],
text: message['type'] == 'LOCATION'
? ''
: message['message'],
time: _formatTimestamp(message['timestamp']),
type: message['type'],
isSentByUser: isUserMessage,
coordinates: message['type'] == 'LOCATION'
? message['message']
: {},
)
: IncomingMessage(
text: message['type'] == 'LOCATION'
? ''
: message['message'],
time: _formatTimestamp(message['timestamp']),
proPic: message['profileImage'],
type: message['type'],
iseSentByUser: isUserMessage,
coordinates: message['type'] == 'LOCATION'
? message['message']
: {},
user: message['user'],
);
}
},
),
],
),
),
),
if (isQuestionDisabled)
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: TextField(
onTapOutside: (event) {
print('onTapOutside');
FocusManager.instance.primaryFocus?.unfocus();
},
controller: _messageController,
maxLength: 200, // Set max length
maxLengthEnforcement: MaxLengthEnforcement.enforced,
decoration: InputDecoration(
hintText: 'Message',
filled: true,
fillColor: const Color(0xFF2A2A2A),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
),
),
),
),
IconButton(
icon: SvgPicture.asset('assets/icons/up_arrow.svg'),
onPressed: _sendMessage,
),
IconButton(
icon: const Icon(Icons.attach_file),
onPressed: () {
showModalBottomSheet(
elevation: 0,
context: context,
builder: (builder) => AttachmentBottomSheet(
loadMessages: _loadChatMessages));
},
),
],
),
)
],
),
bottomNavigationBar: isQuestionDisabled
? BottomAppBar(
child: Container(
height: 56.0,
child: Center(
child: Text(
'Session Ended',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
),
)
: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CustomTextButton(
text: 'Report',
onPressed: () {
showModalBottomSheet(
elevation: 0,
context: context,
builder: (build) => reportSheet());
},
borderRadius: BorderRadius.circular(24),
backgroundColor: Colors.transparent,
borderColor: const Color(0xFF0C8CE9),
padding: const EdgeInsets.symmetric(
horizontal: 10,
),
),
CustomTextButton(
text: 'Quit',
onPressed: () {
Navigator.of(context).popUntil((route) => route.isFirst);
},
backgroundColor: const Color(0xFFFF5050),
borderRadius: BorderRadius.circular(24),
padding: const EdgeInsets.symmetric(horizontal: 20),
)
],
),
),
);
}
bottomNavigationBar 适用于条件 isQuestionDisabled 但是,
if (isQuestionDisabled)
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: TextField(
onTapOutside: (event) {
print('onTapOutside');
FocusManager.instance.primaryFocus?.unfocus();
},
controller: _messageController,
maxLength: 200, // Set max length
maxLengthEnforcement: MaxLengthEnforcement.enforced,
decoration: InputDecoration(
hintText: 'Message',
filled: true,
fillColor: const Color(0xFF2A2A2A),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(100),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 20,
),
),
),
),
IconButton(
icon: SvgPicture.asset('assets/icons/up_arrow.svg'),
onPressed: _sendMessage,
),
IconButton(
icon: const Icon(Icons.attach_file),
onPressed: () {
showModalBottomSheet(
elevation: 0,
context: context,
builder: (builder) => AttachmentBottomSheet(
loadMessages: _loadChatMessages));
},
),
],
),
)
对于给定值,这总是相反的。上面的行应该消失
isQuestionDisabled == true
困惑为什么渲染有效
()?值1:值2
但不是为了
如果()
构建方法中的条件渲染似乎存在问题。这应该根据 isQuestionDisabled 的值正确渲染 UI,但是代码中的其他地方可能存在另一个问题 😕
if 条件只会在条件为 true 时运行下一个代码,在这种情况下,
if (isQuestionDisabled)
将使小部件仅在 isQuestionDisabled == true 时出现,如果您希望在问题被禁用时不显示它,您应该替换isQuestionDisabled
与 !isQuestionDisabled
condition ? value1 : value2
之所以有效,是因为你正确使用了它,如果条件为真,它将显示值1,如果条件为假,它将显示值2