条件渲染不适用于 flutter 小部件

问题描述 投票:0回答:1

构建方法内部👇🏽

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,但是代码中的其他地方可能存在另一个问题 😕

flutter dart widget conditional-operator conditional-rendering
1个回答
0
投票

if 条件只会在条件为 true 时运行下一个代码,在这种情况下,

if (isQuestionDisabled)
将使小部件仅在 isQuestionDisabled == true 时出现,如果您希望在问题被禁用时不显示它,您应该替换
isQuestionDisabled
!isQuestionDisabled

condition ? value1 : value2
之所以有效,是因为你正确使用了它,如果条件为真,它将显示值1,如果条件为假,它将显示值2

© www.soinside.com 2019 - 2024. All rights reserved.