如何在颤动中滚动时修复小部件的位置不移动答案

【问题标题】：How to fix a widget's position to not move while scrolling in flutter如何在颤动中滚动时修复小部件的位置不移动
【发布时间】：2021-08-30 19:22:51
【问题描述】：

我已经制作了一个自定义抽屉 ui，但我希望其中包含用户详细信息，并且注销按钮不应该滚动。我使用了定位，但它给出了不正确的父级用法，并且在每个小部件上分别在堆栈中它不起作用我如何实现静态 ui 位置我不想让用户详细信息和注销按钮也随着滚动而移动我不想失去对不同屏幕尺寸的响应能力。

import 'package:avunja/commons/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'onlinebutton.dart';

class InkWellDrawer extends StatefulWidget {
  @override
  _InkWellDrawerState createState() => _InkWellDrawerState();
}

class _InkWellDrawerState extends State<InkWellDrawer> {
  bool _enable = false;
  @override
  Widget build(BuildContext ctxt) {
    return Drawer(
      child: Container(
        color: Color(ReddishColor),
        child: ListView(
          children: <Widget>[
            Container(
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 10,
                  ),
                  Padding(
                      padding: EdgeInsets.only(),
                      child: Container(
                        height: 80,
                        color: Color(0xFFBB0218),
                        child: Stack(
                          children: <Widget>[
                            Positioned(
                              child: Align(
                                alignment: Alignment.centerLeft,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 20),
                                  child: CircleAvatar(
                                    radius: 30.0,
                                    backgroundImage:
                                        AssetImage("assets/girl.png"),
                                    backgroundColor: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                            Positioned(
                              child: Align(
                                alignment: Alignment.centerLeft,
                                child: Padding(
                                    padding:
                                        EdgeInsets.only(left: 90, bottom: 40),
                                    child: Text(
                                      "Angela Moury",
                                      style: TextStyle(
                                          fontWeight: FontWeight.w500,
                                          color: Colors.white,
                                          fontSize: 16),
                                    )),
                              ),
                            ),
                            Positioned(
                              child: Align(
                                alignment: Alignment.centerLeft,
                                child: Padding(
                                    padding: EdgeInsets.only(left: 90, top: 5),
                                    child: Text(
                                      "(254)7XX XX5 555",
                                      style: TextStyle(
                                          color: Colors.white,
                                          fontWeight: FontWeight.w500,
                                          fontSize: 14),
                                    )),
                              ),
                            ),
                            Positioned(
                              child: Align(
                                alignment: Alignment.centerLeft,
                                child: Padding(
                                  padding: EdgeInsets.only(left: 90, top: 45),
                                  child: Text("carrie.m@avunja.com",
                                      style: TextStyle(
                                          fontWeight: FontWeight.w500,
                                          fontSize: 14,
                                          color: Colors.white)),
                                ),
                              ),
                            ),
                          ],
                        ),
                      )),
                  Padding(
                    padding: EdgeInsets.only(left: 20, right: 20, top: 5),
                    child: Container(
                      child: Image.asset("assets/dividinglinedrawer.png"),
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(),
                        child: ListTile(
                          leading: Image.asset('assets/power.png'),
                          title: Text(
                            'Online Status',
                            style: TextStyle(fontSize: 14, color: Colors.white),
                          ),
                          trailing: CustomSwitch(
                            value: _enable,
                            onChanged: (bool val) {
                              setState(() {
                                _enable = val;
                              });
                            },
                          ),
                          onTap: () {},
                        ),
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/house.png'),
                              title: Text(
                                'Home',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/mail.png'),
                              title: Text(
                                'Inbox',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/notification.png'),
                              title: Text(
                                'Notifications',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 20, right: 20, top: 5),
                        child: Container(
                          child: Image.asset("assets/dividinglinedrawer.png"),
                        ),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/account.png'),
                              title: Text(
                                'Account',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/payment.png'),
                              title: Text(
                                'Payment',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/topup.png'),
                              title: Text(
                                'Topup',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/withdraw.png'),
                              title: Text(
                                'Withdraw',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/bills.png'),
                              title: Text(
                                'Bills & Utilities',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 20, right: 20, top: 5),
                        child: Container(
                          child: Image.asset("assets/dividinglinedrawer.png"),
                        ),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/reports.png'),
                              title: Text(
                                'Reports',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/transactions.png'),
                              title: Text(
                                'Transactions',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 20, right: 20, top: 5),
                        child: Container(
                          child: Image.asset("assets/dividinglinedrawer.png"),
                        ),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/reward.png'),
                              title: Text(
                                'Rewards & Promotions',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/refer.png'),
                              title: Text(
                                'Refer',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 20, right: 20, top: 5),
                        child: Container(
                          child: Image.asset("assets/dividinglinedrawer.png"),
                        ),
                      ),
                      SizedBox(
                        height: 5,
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/support.png'),
                              title: Text(
                                'Support',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(),
                            child: ListTile(
                              leading: Image.asset('assets/settings.png'),
                              title: Text(
                                'Settings',
                                style: TextStyle(
                                    fontSize: 14, color: Colors.white),
                              ),
                              onTap: () {},
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: 20, right: 20, top: 5),
                    child: Container(
                      child: Image.asset("assets/dividinglinedrawer.png"),
                    ),
                  ),
                  SizedBox(
                    height: 15,
                  ),
                  Padding(
                      padding: EdgeInsets.only(),
                      child: Container(
                        height: 60,
                        color: Color(0xFFBB0218),
                        child: Padding(
                          padding: EdgeInsets.only(),
                          child: ListTile(
                            leading: Image.asset('assets/logout.png'),
                            title: Text(
                              'Logout',
                              style:
                                  TextStyle(fontSize: 14, color: Colors.white),
                            ),
                            onTap: () {},
                          ),
                        ),
                      )),
                  SizedBox(
                    height: 50,
                    child: Container(
                      height: 50,
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

能否添加当前页面的截图和想要的结果？仅从代码很难想象这个问题:)
添加你想要的截图或图表？（正如@RohanThacker 所说）
截图会很棒！
添加了截图，我只希望它的配置文件部分是静态的。当我向下滚动抽屉中的其他选项时，它不应该滚动。同样适用于注销需要它修复

标签： firebase flutter dart flutter-layout flutter-dependencies

【解决方案1】：

只需添加到您要滚动的代码部分-“ListView”并添加到您不想滚动的“ListView”-“physics: NeverScrollablePhysics()”

【讨论】：

【解决方案2】：

您可以使用两个ListView 小部件来解决这个问题。

第一个 ListView，我们可以使用它的父 ListView，物理为 NeverScrollableScrollPhysics()，然后你可以在父列表视图中使用 另一个 ListView。然后你可以在父 ListView 中滚动子 ListView。

此外，您可以使用以下示例。

ListView( //Parent ListView with physics as NeverScrollableScrollPhysics()
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap : true,
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Container(alignment: Alignment.center, child: CircleAvatar(child: Icon(Icons.person, color: Colors.purple), backgroundColor: Colors.white)),
        ),
        ListView( // scroll child ListView Widget
          shrinkWrap : true,
          children: [
            GestureDetector(
              child: getDrawerItem(Icons.person, 'Profile'),
              onTap: () {},
            ),
            GestureDetector(
              child: getDrawerItem(Icons.history, 'History'),
              onTap: () {},
            ),
            GestureDetector(
              child: getDrawerItem(Icons.data_usage, 'Performance'),
              onTap: () {},
            ),
            GestureDetector(
              child: getDrawerItem(Icons.beach_access, 'Environments'),
              onTap: () {},
            ),
          ],
        ),
        Divider(),
        GestureDetector(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
              child: Container(
                  child: Text(
                'Log Out',
                style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0, color: Color(0xFF251756)),
                textAlign: TextAlign.center,
              )),
            ),
          ),
          onTap: () {},
        )
      ],
    );

希望这个答案能解决你的问题！

【讨论】：

【解决方案3】：

我不确定我是否完全理解您不想滚动的部分，但如果它是 AppBar()，请考虑使用 CustomScrollView()（在此处阅读更多信息：https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html）。在slivers 参数中，您可以放置一个SliverAppBar()（在此处阅读更多信息：https://api.flutter.dev/flutter/material/SliverAppBar-class.html），您可以将其固定到屏幕上，或者在用户滚动时更改它，同时保持滚动或让它随着屏幕滚动。然后，您将在下面添加 SliverList()（在此处阅读更多信息：https://api.flutter.dev/flutter/widgets/SliverList-class.html）而不是 ListView()。

如果这不是您要查找的内容，请使用当前 UI 和所需 UI 的屏幕截图更新您的帖子。

【讨论】：

【解决方案4】：

我建议你把抽屉做成屏风。将其右侧完全设为白色，以便它可能是一个抽屉并像普通屏幕一样休息。堆叠列表视图，然后physics: NeverScrollableScrollPhysics(), 将按预期工作。使用自定义屏幕，还可以有许多其他选项，因此您将获得正确的东西，稍微妥协屏幕上实际抽屉的模糊性，您也可以覆盖它，但它太复杂了，我想您可以尝试一下。

【讨论】：