Question

我需要连续显示头像和一列，看起来像彼此重叠。像这样

我已经完成了左侧操作，但是不知道如何添加这种图标，这似乎与我的专栏重叠了，这是我的代码

 Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Container(
          width: double.infinity,
          color: Color(0xff1b4881),
          child: Column(
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SizedBox(
                    height: height * 0.05,
                  ),
                  Container(
                      padding: EdgeInsets.only(left: 10),
                      alignment: Alignment.topLeft,
                      child: new SizedBox(
                          child: FloatingActionButton(
                        backgroundColor: Colors.white,
                        child: Icon(Icons.arrow_back_ios, color: Color(0xff1b4881),),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ))),
                  SizedBox(
                    height: height * 0.03,
                  ),
                  Container(
                    padding: EdgeInsets.only(right: 20),
                    color: Colors.white,
                    width: width * 0.7,
                    height: height * 0.1,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          'Rtn.XYZZ',
                          style: TextStyle(fontSize: 22),
                        ),
                        Text(
                          'President',
                          style: TextStyle(fontSize: 22),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ],
          )),
    );
  }

Answer 1

尝试一下

Container(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
            child: Stack(
              alignment: Alignment.topCenter,
              children: <Widget>[
                Container(
                  height: 60,
                  width: MediaQuery.of(context).size.width,
                  margin: const EdgeInsets.only(top: 20, bottom: 20, right: 10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('AskNilesh'),
                      Text('AskNilesh'),
                    ],
                  ),
                  decoration: BoxDecoration(
                      color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(20.0))),
                ),
                Positioned(
                  right: 0,
                  top: 0,
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(50.0)),
                    child: Container(
                      height: 100,
                      width: 100,
                      decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.all(Radius.circular(50.0))),
                    ),
                  ),
                )
              ],
            ),
          )

输出

Answer 2

您可以使用堆栈小部件来重叠小部件：

Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Text('Rtn.xxx'),
                  Text('secretory'),
                ],
              ),
              Positioned(
                left: 10,
                right: 10,
                top: 10,
                bottom: 10,
                child: CircleAvatar(
                  child: Image.asset('blablabla.png'),
                ),
              )
            ],
          )

然后使用“位置”小部件中的上，左，右，上按钮值进行播放，以完全根据需要对齐项目。

颤振显示图标与列重叠

2 个答案: