【问题标题】:Flutter how to screen just list in a bottom sheet颤振如何筛选仅在底部工作表中列出
【发布时间】:2021-08-06 14:49:06
【问题描述】:

我在底部显示了一个简单的列表视图构建器,如下所示

showModalBottomSheet(
    context: context,
    builder: (BuildContext bc){
      return SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RichText(
                text: new TextSpan(
                  // Note: Styles for TextSpans must be explicitly defined.
                  // Child text spans will inherit styles from parent
                  style: new TextStyle(
                    fontSize: 16.0,
                    color: Colors.black,
                  ),
                  children: <TextSpan>[
                    new TextSpan(
                        text: 'Select ',
                        style: new TextStyle(
                            fontSize: 16,
                            fontFamily: 'PoppinsMedium')),
                    new TextSpan(
                        text: 'Patient',
                        style: TextStyle(
                            fontSize: 16,
                            fontFamily: 'PoppinsRegular', color: textGreyColor)),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(bottom: 13),
              child: Container(
                height: MediaQuery.of(context).size.height * 0.08,
                width: MediaQuery.of(context).size.width * 0.92 ,
                child: TextFormField(
                  onChanged: (value) {

                  },
                  onSaved: (value) {},
                  style: TextStyle(
                      fontSize: 15,
                      color: kPrimaryColor,
                      fontFamily: 'UbuntuRegular'),
                  decoration: new InputDecoration(
                    border: new OutlineInputBorder(
                      borderSide:
                      const BorderSide(color: Color(0xffbdbdbd), width: 1),
                      borderRadius: const BorderRadius.all(
                        const Radius.circular(10.0),
                      ),
                    ),
                    enabledBorder: new OutlineInputBorder(
                      borderSide:
                      const BorderSide(color: Color(0xffbdbdbd), width: 1),
                      borderRadius: const BorderRadius.all(
                        const Radius.circular(10.0),
                      ),
                    ),
                    filled: true,
                    hintStyle: new TextStyle(
                        color: Color(0xffbdbdbd), fontFamily: 'UbuntuRegular'),
                    hintText: "Search",
                    fillColor: Colors.white70,
                    focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: kPrimaryColor, width: 1),
                      borderRadius: const BorderRadius.all(
                        const Radius.circular(10.0),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Container(
              child: new             ListView.builder(
                itemCount: 8,
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                physics: ScrollPhysics(),
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.only(bottom: 10, left: 15, right: 15),
                    child: Container(
                      child: GestureDetector(
                        // onTap: widget.onPressed,
                        onTap: () {},
                        child: Stack(children: [
                          Container(
                            width: double.infinity,
                            padding: EdgeInsets.all(15.0),
                            margin: EdgeInsets.only(bottom: 15.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(12.0),
                              border: Border.all(
                                color: kPrimaryColor,
                                width: 1.0,
                              ),
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    RichText(
                                      text: new TextSpan(
                                        // Note: Styles for TextSpans must be explicitly defined.
                                        // Child text spans will inherit styles from parent
                                        style: new TextStyle(
                                          fontSize: 14.0,
                                          color: Colors.black,
                                        ),
                                        children: <TextSpan>[
                                          new TextSpan(
                                              text: 'Name : ',
                                              style: new TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsMedium')),
                                          new TextSpan(
                                              text: 'Hamza Tariq',
                                              style: TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsRegular', color: textGreyColor)),
                                        ],
                                      ),
                                    ),
                                    RichText(
                                      text: new TextSpan(
                                        // Note: Styles for TextSpans must be explicitly defined.
                                        // Child text spans will inherit styles from parent
                                        style: new TextStyle(
                                          fontSize: 14.0,
                                          color: Colors.black,
                                        ),
                                        children: <TextSpan>[
                                          new TextSpan(
                                              text: 'Contact : ',
                                              style: new TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsMedium')),
                                          new TextSpan(
                                              text: '03323789263',
                                              style: TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsRegular', color: textGreyColor)),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                                SizedBox(height: 8.0),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    RichText(
                                      text: new TextSpan(
                                        // Note: Styles for TextSpans must be explicitly defined.
                                        // Child text spans will inherit styles from parent
                                        style: new TextStyle(
                                          fontSize: 14.0,
                                          color: Colors.black,
                                        ),
                                        children: <TextSpan>[
                                          new TextSpan(
                                              text: 'Gender : ',
                                              style: new TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsMedium')),
                                          new TextSpan(
                                              text: 'Male',
                                              style: TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsRegular', color: textGreyColor)),
                                        ],
                                      ),
                                    ),
                                    RichText(
                                      text: new TextSpan(
                                        // Note: Styles for TextSpans must be explicitly defined.
                                        // Child text spans will inherit styles from parent
                                        style: new TextStyle(
                                          fontSize: 14.0,
                                          color: Colors.black,
                                        ),
                                        children: <TextSpan>[
                                          new TextSpan(
                                              text: 'Reg Date : ',
                                              style: new TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsMedium')),
                                          new TextSpan(
                                              text: '12-MAY-2021',
                                              style: TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsRegular',
                                                  color: textGreyColor)),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                                SizedBox(height: 8.0),

                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    RichText(
                                      text: new TextSpan(
                                        // Note: Styles for TextSpans must be explicitly defined.
                                        // Child text spans will inherit styles from parent
                                        style: new TextStyle(
                                          fontSize: 14.0,
                                          color: Colors.black,
                                        ),
                                        children: <TextSpan>[
                                          new TextSpan(
                                              text: 'Patient ID : ',
                                              style: new TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsMedium')),
                                          new TextSpan(
                                              text: 'C-200',
                                              style: TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsRegular',
                                                  color: textGreyColor)),
                                        ],
                                      ),
                                    ),

                                    RichText(
                                      text: new TextSpan(
                                        // Note: Styles for TextSpans must be explicitly defined.
                                        // Child text spans will inherit styles from parent
                                        style: new TextStyle(
                                          fontSize: 14.0,
                                          color: Colors.black,
                                        ),
                                        children: <TextSpan>[
                                          new TextSpan(
                                              text: 'Email : ',
                                              style: new TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsMedium')),
                                          new TextSpan(
                                              text: 'abc.33@hotmail.com',
                                              style: TextStyle(
                                                  fontSize: 13,
                                                  fontFamily: 'PoppinsRegular',
                                                  color: textGreyColor)),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ]),
                      ),
                    ),
                  );
                },
              )
              ,
            )
          ],
        ),
      );
    }
);

问题是当我滚动搜索栏并且我的标题也在滚动时,因为我在整个底部工作表上添加了 SingleChildScrollView。我需要做的是我只需要滚动 listView 而不是底部工作表中的全部内容。如果我从底部工作表中删除 SingleChildScrollView,则会显示溢出错误。需要知道我可以在这里做什么,这样我才能获得一个带有粘性搜索栏和标题的可滚动列表视图。

【问题讨论】:

    标签: flutter dart


    【解决方案1】:

    删除SingleChildScrollView 并在ListView.builder 上添加Expanded,如下所示:

    Dartpad在线运行代码。

    【讨论】:

      猜你喜欢
      • 2021-05-25
      • 2021-03-16
      • 2020-11-13
      • 2019-03-22
      • 2019-06-15
      • 2019-08-03
      • 2020-09-04
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多