Flutter 在自定义 UI 上使用 center_horizontal答案

【问题标题】：Flutter use center_horizontal on custom UIFlutter 在自定义 UI 上使用 center_horizontal
【发布时间】：2019-05-07 16:41:31
【问题描述】：

下面的屏幕截图是我设计和自定义的 UI，我想在 Flutter 中制作它

在下面用颤振实现的代码中，我无法为圆圈Container 生成center_horizontal，即在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
                    ),
                  )
                ],
              ),
            )
          ],
        )),
      ],
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout

【解决方案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,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

这给了我

【讨论】：

【解决方案2】：

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

问题是列的宽度等于圆的大小，而列本身位于堆栈的左上角。所以有两种可能的解决方案：

使列占据全宽

或

通过传递使列本身居中 alignment: Alignment.topCenter Stack 构造函数

【讨论】：