Flutter 抽屉溢出

Question

我正在尝试在我的 Flutter 应用程序上实现跟随抽屉显示。我在绘制抽屉外的 X 关闭图标时遇到问题。有没有简单的方法来绘制抽屉布局之外的 X？请注意，抽屉内容本身可以有很多行（可滚动。）

到目前为止，我得出以下解决方案：

import 'package:flutter/material.dart';

class tempDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return
      Container(
          width: 250,

          child:Drawer(child:
          SafeArea(child:Container(
            //width: 300,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: FractionalOffset.bottomCenter,
                    colors: [Color(0xffa4151a), Color(0xffe34b3d)],
                    stops: [0, 1],
                  )),
              child: ListView(
                padding: EdgeInsets.zero,
                children: <Widget>[
                  Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(width:70,child:ClipOval(child: Image(
                          image: AssetImage("images/face.png"),
                          fit: BoxFit.cover,
                          height: 70,
                          width: 70,
                        ))),
                        Container(width: 16,),
                        Container(width: 129,child:Text("Alex assdsddff",overflow: TextOverflow.clip, style: TextStyle(color: Colors.white),)),
                        ClipOval(
                            child:Container(
                                decoration: BoxDecoration(color: Color(0xffa4151a)),
                                width: 50,
                                child:
                                Container(child: Icon(Icons.close,size: 40,color: Colors.white,)))),
                      ]),
                  Divider(color: Colors.white,indent: 20,endIndent: 20,),
                  Row(
                    children: <Widget>[
                      Icon(Icons.home_outlined,color: Colors.white,),
                      Padding(
                        padding: EdgeInsets.only(left: 8.0),
                        child: Text("HOME", style: TextStyle(color: Colors.white),),
                      )
                    ],
                  ),

                ],
              )),
          )
          ));
  }
}

这给了我需要的结果，但我在我的图标所在的地方有一条“溢出”消息。有没有更正确的方法来放置关闭图标或至少以某种方式摆脱每个特定小部件的溢出消息？

Answer 1

试试下面的代码希望对你有帮助。在 Expanded 或 Flexible 小部件中添加您的容器。请参阅扩展 here and Flexible here

     Expanded(
                      child: Container(
                        width: 99,
                        child: Text(
                          "Some user name",
                          overflow: TextOverflow.clip,
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),

您的结果屏幕->

Answer 2

你用Stack将抽屉一分为二得到UI。更简单的方法是使用 transform.

删除 ClipOval 小部件并在 Container 上使用 shape: BoxShape.circle。


class tempDrawer extends StatelessWidget {
  final drawerWidth = 250.0;
  final double iconButtonSize = 50;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: drawerWidth + iconButtonSize * .5, // we want half outside
      child: Theme(
        // make transparent drawer
        data: Theme.of(context).copyWith(
          canvasColor: Colors.white.withOpacity(0),
        ),
        child: Drawer(
          child: Stack(
            children: [
              Container(
                  width: drawerWidth,
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: FractionalOffset.bottomCenter,
                      colors: [Color(0xffa4151a), Color(0xffe34b3d)],
                      stops: [0, 1],
                    ),
                  ),
                  child: ListView(
                    padding: EdgeInsets.zero,
                    children: <Widget>[
                      Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              width: 70,
                              color: Colors.green,
                              // child: ClipOval(
                              // child: Image(
                              //   image: AssetImage("images/face.png"),
                              //   fit: BoxFit.cover,
                              //   height: 70,
                              //   width: 70,
                              //   //   ),
                              // ),
                            ),
                            const SizedBox(
                              width: 16,
                            ),
                            SizedBox(
                              // remove  img+space width
                              width: drawerWidth - 70 - 16,
                              child: const Text(
                                "Alex assdsddff",
                                overflow: TextOverflow.clip,
                                style: TextStyle(color: Colors.white),
                              ),
                            ),
                          ]),
                      Divider(
                        color: Colors.white,
                        indent: 20,
                        endIndent: 20,
                      ),
                      Row(
                        children: <Widget>[
                          Icon(
                            Icons.home_outlined,
                            color: Colors.white,
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 8.0),
                            child: Text(
                              "HOME",
                              style: TextStyle(color: Colors.white),
                            ),
                          )
                        ],
                      ),
                    ],
                  )),
              Positioned(
                top: 20,
                right: 0,
                child: Container(
                  alignment: Alignment.center,
                  decoration: const BoxDecoration(
                    color: Colors.pink,
                    shape: BoxShape.circle,
                  ),
                  width: iconButtonSize,
                  height: iconButtonSize,
                  child: GestureDetector(
                    onTap: () {
                      print("close");
                    },
                    child: const Icon(
                      Icons.close,
                      size: 40,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

您可以使用 Drawer:elevation 处理阴影。

Flutter 抽屉溢出

Flutter Drawer overflow

navigation-drawer

flutter