【问题标题】:How to center align stacking elements, and how to stretch one horizontally?如何居中对齐堆叠元素,以及如何水平拉伸一个?
【发布时间】:2019-08-29 20:03:40
【问题描述】:

早上好。我正在尝试创建this 屏幕。有两个问题:

1) 我无法将绿色水平线拉伸到整个宽度。这是我的代码,或多或少:

Scaffold(
  Stack(
    Center(
      Column(
      ...
      ),
    ),
    Align(
      alignment: Alignment.center,
      child: Image(
        image: AssetImage('assets/load_line.png'),
        fit: BoxFit.fitWidth,
      ),
    ),

this 是我的代码给我的。好像某处有填充或边距,但我找不到。

2) 正如您在我的第一个屏幕截图中所见,我需要将徽标和水平线居中放置,但显然它们没有对齐。我想使用单个图像,但我担心拉伸会破坏它。我该怎么做才能达到这个结果?

谢谢大家。

【问题讨论】:

    标签: dart flutter flutter-layout


    【解决方案1】:

    你可以试试这个方法。

    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.green,
        appBar: AppBar(title: Text("Title")),
        body: Stack(
          children: <Widget>[
            Align(child: Image.asset("assets/images/profile.jpg")),
            Align(child: Container(height: 1, color: Colors.black12)),
            Align(
              alignment: Alignment(0.0, 0.2),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text("Your first text here!"),
                  Text("Your second text here"),
                  Text("Your third text here!"),
                ],
              ),
            )
          ],
        ),
      );
    }
    

    输出

    【讨论】:

    • 工作就像一个魅力,我不知道你可以这样使用Align()。你能看看我的另一个post吗?谢谢@CopsOnRoad
    • 是的,我正在那里看看。感谢您接受它。请在那里分享您的屏幕截图。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-30
    • 2010-09-11
    相关资源
    最近更新 更多