Flutter无法在SingleChildScrollView中呈现扩展的小部件

m2xkgtsf  于 2023-01-14  发布在  Flutter
关注(0)|答案(3)|浏览(161)

所以我有这个构建方法:

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _createBody(),
  );
}

Widget _createBody(){
  return SafeArea(
    child: Column(
     children: [
      Container(
        margin: const EdgeInsets.only(top: 5, left: 10, right: 10),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "xOrder HD",
              style: TextStyle(
                color: Colors.blue[900],
                fontSize: 36
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 13, top: 13),
              alignment: Alignment.bottomLeft,
              child: Text(AppVersion.xOrderVersion()),
            )
          ],
        )
      ),
      Container(
        margin: const EdgeInsets.symmetric(horizontal: 10),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              AppLocalizations.of(context)!.solutionFor,
              textAlign: TextAlign.start,
            ),
          ],
        )
      ),
      Expanded(
        child: Container(
          margin: const EdgeInsets.only(left: 25, right: 25, top: 20, bottom: 10),
          child: Row(
            children: [
                Expanded(
                  child: Container(
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.symmetric(vertical: 10),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                AppLocalizations.of(context)!.companyList,
                                style: const TextStyle(
                                  color: Colors.white,
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                )
                              ),
                            ],
                          ),
                          decoration: BoxDecoration(
                            color: mainColor,
                            borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
                          ),
                        ),

                        _loadedAziende.isEmpty ? 
                          Expanded(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  AppLocalizations.of(context)!.noCompanyFound,
                                  style: const TextStyle(
                                    color: Colors.black54,
                                    fontSize: 16
                                  )
                                ),
                                const SizedBox(height: 50,),
                                GestureDetector(
                                  onTap: () {
                                    Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
                                  },
                                  child: Material(
                                    elevation: 5,
                                    borderRadius: const BorderRadius.all(Radius.circular(5)),
                                    child: Container(
                                      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                                      child:  Row(
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          const Icon(Icons.add, color: Colors.white,),
                                          const SizedBox(width: 10,),
                                          Text(
                                            AppLocalizations.of(context)!.newCompany,
                                            style: const TextStyle(
                                              fontSize: 16,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.white,
                                            )
                                          ),
                                        ],
                                      ),
                                      decoration: BoxDecoration(
                                        color: mainColor,
                                        borderRadius: const BorderRadius.all(Radius.circular(5))
                                      ),
                                    ),
                                  )
                                )
                              ],
                            )
                          )
                        :
                          Expanded(
                            child: Stack(
                              children: [
                                ListView.separated(
                                  itemCount: _aziendeToShow.length,
                                  itemBuilder: (ctx, index) {
                                    return InfoCell(
                                      info: _aziendeToShow[index],
                                      delegate: this,
                                    );
                                  }, 
                                  separatorBuilder: (ctx, index) => const Divider(height: 1,), 
                                ),
                                Positioned(
                                  bottom: 15,
                                  right: 15,
                                  child: GestureDetector(
                                    onTap: () {
                                      Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
                                    },
                                    child: Container(
                                      padding: const EdgeInsets.all(10),
                                      child: const Icon(Icons.qr_code_scanner, color: Colors.white, size: 28),
                                      decoration: BoxDecoration(
                                        color: mainColor,
                                        shape: BoxShape.circle
                                      ),
                                    )
                                  )
                                )
                              ],
                            )
                          )
                      ],
                    ),
                    decoration: BoxDecoration(
                      color: Colors.grey[100],
                      border: Border.all(color: Colors.grey[500]!),
                      borderRadius: const BorderRadius.all(Radius.circular(5))
                    ),
                  ),
                ),
                if(_loadedAziende.isNotEmpty)
                  const SizedBox(width: 25,),
                if(_loadedAziende.isNotEmpty)
                  Expanded(
                    child: Container(
                      child: Column(
                        children: [
                          Container(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  AppLocalizations.of(context)!.login,
                                  style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold,
                                  )
                                ),
                              ],
                            ),
                            decoration: BoxDecoration(
                              color: mainColor,
                              borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
                            ),
                          ),

                          isEmptyOrNull(_selectedAzienda) ? 
                            Expanded(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    AppLocalizations.of(context)!.selectAcompany,
                                    style: const TextStyle(
                                      color: Colors.black54,
                                      fontSize: 16
                                    )
                                  ),
                                ],
                              )
                            )
                          :
                            Expanded(
                              child: Column(
                                children: [
                                  Container(
                                    height: 150,
                                    margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                                    decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      border: Border.all(color: Colors.grey[400]!),
                                      image: DecorationImage(
                                        image: Image.network(_selectedAzienda!.aziendaLogo).image,
                                        fit: BoxFit.contain
                                      )
                                    ),
                                  ),
                                  Text(
                                    _selectedAzienda!.aziendaCode,
                                    style: const TextStyle(
                                      color: Colors.black,
                                      fontSize: 25,
                                      fontWeight: FontWeight.bold
                                    ),
                                  ),
                                  Container(
                                    margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 15),
                                    child: const TextField(
                                      decoration: InputDecoration(
                                        filled: true,
                                        fillColor: Colors.white,
                                        icon: Icon(Icons.person),
                                        border: OutlineInputBorder(),
                                        labelText: 'Username',
                                      ),
                                    )
                                  ),
                                  Container(
                                    margin: const EdgeInsets.only(bottom: 30, left: 15, right: 15),
                                    child: const TextField(
                                      obscureText: true,
                                      decoration: InputDecoration(
                                        filled: true,
                                        fillColor: Colors.white,
                                        icon: Icon(Icons.password),
                                        border: OutlineInputBorder(),
                                        labelText: 'Password',
                                      ),
                                    )
                                  ),
                                  const Spacer(),
                                  Container(
                                    margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                                    padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                                    child: Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                        const Icon(Icons.login, color: Colors.white,),
                                        const SizedBox(width: 15,),
                                        Text(
                                          AppLocalizations.of(context)!.login,
                                          style: const TextStyle(
                                            fontSize: 22,
                                            color: Colors.white,
                                            fontWeight: FontWeight.bold
                                          ),
                                        )
                                      ],
                                    ),
                                    decoration: BoxDecoration(
                                      color: mainColor,
                                      borderRadius: const BorderRadius.all(Radius.circular(5))
                                    ),
                                  )
                                ],
                              )
                            )
                        ],
                      ),
                      decoration: BoxDecoration(
                        color: Colors.grey[100],
                        border: Border.all(color: Colors.grey[500]!),
                        borderRadius: const BorderRadius.all(Radius.circular(5))
                      )
                    ),
                  )
            ],
          ),
        ),
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(
            margin: const EdgeInsets.all(10),
            height: 82,
            width: 135,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: Image.asset("assets/images/logo-axentya-inv.png").image,
                fit: BoxFit.fill
              )
            ),
          )
        ],
      )
    ],
  ),
);
}

这是最终的结果

当我单击文本字段时出现问题,键盘显示在文本字段上方,并显示黑色和黄色横幅:

我不知道为什么在这张截图中键盘没有显示出来,但我发誓这是打开的。
如果我试图把主列容器放在SingleChildScrollView中,编译器告诉我它不能呈现它,因为我没有指定高度尺寸。我应该如何解决这个问题。

efzxgjgh

efzxgjgh1#

将此resizeToAvoidBottomPadding: false添加到Scaffold

@override
  Widget build(BuildContext context) {
    return Scaffold(
       resizeToAvoidBottomPadding: false,
        body: _createBody(),
       );
  }
    • 编辑:**

如果您使用de flutter_keyboard_visibility来减少徽标图像,当软键盘显示时将是这样的:

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

 @override
  Widget build(BuildContext context) {
    return KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {
      return Scaffold(
        resizeToAvoidBottomInset: false,
        body: _createBody(isKeyboardVisible),
      );
    });
  }

Widget _createBody(bool isKeyboardVisible) {
...
       Expanded(
    child: Column(
  children: [
    Container(
      height: isKeyboardVisible ? 50 : 150,  <<--- HERE
      margin: const EdgeInsets.symmetric(
          vertical: 20, horizontal: 10),
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          border:
              Border.all(color: Colors.grey[400]!),
          image: DecorationImage(...
    ),

}
nr9pn0ug

nr9pn0ug2#

答案就在错误本身。当列位于可滚动视图中时,该列会尝试收缩 Package 其内容,但由于您将Expanded用作该列的子列,因此它的工作方式与尝试收缩 Package 其子列的工作方式相反。这会导致此错误,因为这两个指令彼此完全相反。
如错误日志中所述,尝试以下操作:
考虑将mainAxisSize设置为MainAxisSize.min(对于列),并对柔性使用FlexFit.loose配合(使用“柔性”而不是“扩展”)。

gopyfrb3

gopyfrb33#

您不能在SingleChildScrollView中使用Expanded。但是,您可以将CustomScrollViewSliverFillRemaining widget沿着使用来实现这一点:

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverFillRemaining(
            hasScrollBody: true,
            child: _createBody(),
          )
        ],
      ),
    );
  }

  Widget _createBody(){
    return SafeArea(
      child: Column(
        children: [
          Container(
              margin: const EdgeInsets.only(top: 5, left: 10, right: 10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    "xOrder HD",
                    style: TextStyle(
                        color: Colors.blue[900],
                        fontSize: 36
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(left: 13, top: 13),
                    alignment: Alignment.bottomLeft,
                    child: Text(AppVersion.xOrderVersion()),
                  )
                ],
              )
          ),
          Container(
              margin: const EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    AppLocalizations.of(context)!.solutionFor,
                    textAlign: TextAlign.start,
                  ),
                ],
              )
          ),
          Expanded(
            child: Container(
              margin: const EdgeInsets.only(left: 25, right: 25, top: 20, bottom: 10),
              child: Row(
                children: [
                  Expanded(
                    child: Container(
                      child: Column(
                        children: [
                          Container(
                            padding: const EdgeInsets.symmetric(vertical: 10),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                    AppLocalizations.of(context)!.companyList,
                                    style: const TextStyle(
                                      color: Colors.white,
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                    )
                                ),
                              ],
                            ),
                            decoration: BoxDecoration(
                                color: mainColor,
                                borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
                            ),
                          ),

                          _loadedAziende.isEmpty ?
                          Expanded(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                      AppLocalizations.of(context)!.noCompanyFound,
                                      style: const TextStyle(
                                          color: Colors.black54,
                                          fontSize: 16
                                      )
                                  ),
                                  const SizedBox(height: 50,),
                                  GestureDetector(
                                      onTap: () {
                                        Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
                                      },
                                      child: Material(
                                        elevation: 5,
                                        borderRadius: const BorderRadius.all(Radius.circular(5)),
                                        child: Container(
                                          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                                          child:  Row(
                                            mainAxisSize: MainAxisSize.min,
                                            children: [
                                              const Icon(Icons.add, color: Colors.white,),
                                              const SizedBox(width: 10,),
                                              Text(
                                                  AppLocalizations.of(context)!.newCompany,
                                                  style: const TextStyle(
                                                    fontSize: 16,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.white,
                                                  )
                                              ),
                                            ],
                                          ),
                                          decoration: BoxDecoration(
                                              color: mainColor,
                                              borderRadius: const BorderRadius.all(Radius.circular(5))
                                          ),
                                        ),
                                      )
                                  )
                                ],
                              )
                          )
                              :
                          Expanded(
                              child: Stack(
                                children: [
                                  ListView.separated(
                                    itemCount: _aziendeToShow.length,
                                    itemBuilder: (ctx, index) {
                                      return InfoCell(
                                        info: _aziendeToShow[index],
                                        delegate: this,
                                      );
                                    },
                                    separatorBuilder: (ctx, index) => const Divider(height: 1,),
                                  ),
                                  Positioned(
                                      bottom: 15,
                                      right: 15,
                                      child: GestureDetector(
                                          onTap: () {
                                            Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
                                          },
                                          child: Container(
                                            padding: const EdgeInsets.all(10),
                                            child: const Icon(Icons.qr_code_scanner, color: Colors.white, size: 28),
                                            decoration: BoxDecoration(
                                                color: mainColor,
                                                shape: BoxShape.circle
                                            ),
                                          )
                                      )
                                  )
                                ],
                              )
                          )
                        ],
                      ),
                      decoration: BoxDecoration(
                          color: Colors.grey[100],
                          border: Border.all(color: Colors.grey[500]!),
                          borderRadius: const BorderRadius.all(Radius.circular(5))
                      ),
                    ),
                  ),
                  if(_loadedAziende.isNotEmpty)
                    const SizedBox(width: 25,),
                  if(_loadedAziende.isNotEmpty)
                    Expanded(
                      child: Container(
                          child: Column(
                            children: [
                              Container(
                                padding: const EdgeInsets.symmetric(vertical: 10),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    Text(
                                        AppLocalizations.of(context)!.login,
                                        style: const TextStyle(
                                          color: Colors.white,
                                          fontSize: 16,
                                          fontWeight: FontWeight.bold,
                                        )
                                    ),
                                  ],
                                ),
                                decoration: BoxDecoration(
                                    color: mainColor,
                                    borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
                                ),
                              ),

                              isEmptyOrNull(_selectedAzienda) ?
                              Expanded(
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(
                                          AppLocalizations.of(context)!.selectAcompany,
                                          style: const TextStyle(
                                              color: Colors.black54,
                                              fontSize: 16
                                          )
                                      ),
                                    ],
                                  )
                              )
                                  :
                              Expanded(
                                  child: ListView(
                                    children: [
                                      Container(
                                        height: 150,
                                        margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                                        decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            border: Border.all(color: Colors.grey[400]!),
                                            image: DecorationImage(
                                                image: Image.network(_selectedAzienda!.aziendaLogo).image,
                                                fit: BoxFit.contain
                                            )
                                        ),
                                      ),
                                      Text(
                                        _selectedAzienda!.aziendaCode,
                                        style: const TextStyle(
                                            color: Colors.black,
                                            fontSize: 25,
                                            fontWeight: FontWeight.bold
                                        ),
                                      ),
                                      Container(
                                          margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 15),
                                          child: const TextField(
                                            decoration: InputDecoration(
                                              filled: true,
                                              fillColor: Colors.white,
                                              icon: Icon(Icons.person),
                                              border: OutlineInputBorder(),
                                              labelText: 'Username',
                                            ),
                                          )
                                      ),
                                      Container(
                                          margin: const EdgeInsets.only(bottom: 30, left: 15, right: 15),
                                          child: const TextField(
                                            obscureText: true,
                                            decoration: InputDecoration(
                                              filled: true,
                                              fillColor: Colors.white,
                                              icon: Icon(Icons.password),
                                              border: OutlineInputBorder(),
                                              labelText: 'Password',
                                            ),
                                          )
                                      ),
                                      const Spacer(),
                                      Container(
                                        margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                                        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.center,
                                          children: [
                                            const Icon(Icons.login, color: Colors.white,),
                                            const SizedBox(width: 15,),
                                            Text(
                                              AppLocalizations.of(context)!.login,
                                              style: const TextStyle(
                                                  fontSize: 22,
                                                  color: Colors.white,
                                                  fontWeight: FontWeight.bold
                                              ),
                                            )
                                          ],
                                        ),
                                        decoration: BoxDecoration(
                                            color: mainColor,
                                            borderRadius: const BorderRadius.all(Radius.circular(5))
                                        ),
                                      )
                                    ],
                                  )
                              )
                            ],
                          ),
                          decoration: BoxDecoration(
                              color: Colors.grey[100],
                              border: Border.all(color: Colors.grey[500]!),
                              borderRadius: const BorderRadius.all(Radius.circular(5))
                          )
                      ),
                    )
                ],
              ),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                margin: const EdgeInsets.all(10),
                height: 82,
                width: 135,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: Image.asset("assets/images/logo-axentya-inv.png").image,
                        fit: BoxFit.fill
                    )
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

相关问题