颤抖在自定义UI上使用center_horizo​​ntal

Question

下面的屏幕截图是我要在Flutter中制作的我设计和自定义的用户界面

在下面的实现代码中，我无法使center_horizontal成为圆圈Container的{​​{1}}，它位于Card屏幕顶部的左侧

import 'package:flutter/material.dart';

void main() => runApp(LoginApp());

class LoginApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.indigo,
          accentColor: Colors.indigoAccent),
      home: MaterialApp(
        title: 'instaCheeta',
        home: Scaffold(
          body: Login(),
        ),
      ),
    );
  }
}

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          height: 200.0,
          color: Colors.indigo,
        ),
        Positioned(
            child: Card(
          margin: new EdgeInsets.fromLTRB(20, 90, 20, 70),
          elevation: 2.0,
          color: Colors.white,
          child: Container(
            decoration: BoxDecoration(color: Colors.white12),
          ),
        )),
        Positioned(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: new EdgeInsets.only(top: 50),
              height: 100.0,
              width: 100.0,
              decoration: new BoxDecoration(
                color: Colors.white,
                shape: BoxShape.rectangle,
                borderRadius: new BorderRadius.circular(50.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    blurRadius: 2.0,
                    // has the effect of softening the shadow
                    spreadRadius: 1.0,
                    // has the effect of extending the shadow
                    offset: Offset(
                      0.0, // horizontal, move right 10
                      0.0, // vertical, move down 10
                    ),
                  )
                ],
              ),
            )
          ],
        )),
      ],
    );
  }
}

Answer 1

您可以从这段代码中获得一些提示

class SO extends StatelessWidget {
  var mainHeight = 200.0;
  var circularHeight = 100.0;

  @override
  Widget build(BuildContext context) {
    var shiftFraction = -(circularHeight) / (mainHeight - circularHeight);
    return Scaffold(
      body: Column(
        children: <Widget>[
          SizedBox(
            height: 150,
          ),
          Stack(
            alignment: Alignment.topCenter.add(Alignment(0, shiftFraction)),
            children: [
              Container(
                color: Colors.amber,
                height: mainHeight,
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(circularHeight),
                child: Container(
                  color: Colors.red,
                  width: circularHeight,
                  height: circularHeight,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

这给了我

Answer 2

实际上，圆形容器 在列内水平居中。

问题在于列的宽度等于圆的大小，并且列本身位于堆栈的左上角。因此，有两种可能的解决方案：

• 使列采用全宽

或

• 通过以下方式使列本身居中 alignment: Alignment.topCenter到堆栈构造函数