Flutter如何从上到下布局其他布局答案

【问题标题】：Flutter how to layout top to bottom of other layoutFlutter如何从上到下布局其他布局
【发布时间】：2021-09-23 04:18:21
【问题描述】：

如何创建文本必须从上到下的图像横幅并且不与图像重叠？

如果我使用大屏幕正常，但不是像这张图片这样的小屏幕

这是我的颤振代码

 return SingleChildScrollView(
              child: Column(
                children: [
                  SizedBox(
                    height: constraints.biggest.height,
                    child: Stack(
                      children: [
                        Positioned(
                          top: 0,
                          height: BannerHeight,
                          left: 0,
                          right: 0,
                          child: Image(
                            image: AssetImage("asset/images/banner.jpg"),
                            fit: BoxFit.fill,
                          )
                        ),
                        Positioned(
                            top: BannerHeight - BannerHeight / 4,
                            height: 100,
                            left: Left,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text("Nominal",
                                    style: TextStyle(color: Colors.white)),
                                Text("Rp. 1.000.000.000",
                                    style: TextStyle(color: Colors.white)),
                                Text("Point 10.538",
                                    style: TextStyle(color: Colors.white))
                              ]
                            )
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            );

我需要什么

【问题讨论】：

你说的top of bottom other layer是什么意思？
像 xml 中的约束布局与属性 app:layout_constraintTop_toBottomOf=""

标签： flutter

【解决方案1】：

 return LayoutBuilder(
      builder: (context, constraints) => SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              /// you can use `BannerHeight` here
              height: BannerHeight,

              child: Stack(
                children: [
                  Positioned(
                    top: 0,
                    left: 0,
                    right: 0,
                    height: BannerHeight,
                    child: Image(
                      // image: AssetImage("asset/images/banner.jpg"),
                      image: AssetImage('assets/ocean.jpg'),
                      // fit: BoxFit.fill,
                      fit: BoxFit.cover,
                    ),
                  ),
                  Positioned(
                    bottom: 10,
                    // or percentages  BannerHeight * .25,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("Nominal", style: TextStyle(color: Colors.white)),
                        Text("Rp. 1.000.000.000",
                            style: TextStyle(color: Colors.white)),
                        Text("Point 10.538",
                            style: TextStyle(color: Colors.white))
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );

【讨论】：

为什么是SizedBox(height: BannerHeight,？如果sizedbox高度与bannerheight相同，所以如果我添加其他positioned底部bannerimage，它不会显示
我以为你想在横幅上放文字，虽然你已经设置了横幅高度，但我们可以使用这个高度。我不确定您要通过添加另一个底部横幅图像来存档什么，以正确的顺序呈现，将最后一个孩子放置在 UI 之上。小部件在 UI 上从下到上呈现。你能更新一下你在做什么的问题，以及你试图存档的图像吗？
我更新了我的问题，请看我的图片我需要什么。抱歉，如果我的问题不清楚
第二行是身体的一部分，我的意思是在那个堆栈之外。在 Column 中添加行，如果遇到溢出问题，请提供一些高度。
如果您遇到问题，请尝试告诉我。

【解决方案2】：

试试下面的答案希望对你有帮助：

  Stack(
        children: [
          Container(
            height: 150,
            margin: EdgeInsets.symmetric(horizontal: 10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              image: DecorationImage(
                fit: BoxFit.fill,
                image: AssetImage(
                  'assets/images/wines.jpg',
                ),
              ),
            ),
          ),
         
          Positioned(
            left: 12,
            bottom: 0,
            child: Container(
              padding: EdgeInsets.all(8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Nominal',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    'RP 2312313123',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    'Point 10538',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),

您的结果屏幕 ->

【讨论】：

我尝试了，但没有显示文本。我用你的代码替换我的stack 代码