flutter - 如何在 flutter 中对齐定位小部件内的文本?

标签 flutter dart flutter-layout

我想在 LinearGradient 容器内对齐左下角的文本,如图所示,但是当我将列小部件作为容器的子项放置时,它被放置在中心。那么,我需要为图像中的结果编辑正确的代码是什么。

enter image description here enter image description here

主.dart

SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: <Widget>[
                    Container(
                      width: 300,
                      height: 220,
                      child: Stack(
                        fit: StackFit.expand,
                        children: <Widget>[
                          Image(
                            fit: BoxFit.cover,
                            image: AssetImage('assets/image1.png'),
                          ),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            child: Container(
                              width: 285,
                              height: 110,
                              margin: EdgeInsets.only(left:8, bottom: 30),
                              padding: EdgeInsets.only(),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(16),
                                  gradient: LinearGradient(
                                    begin: FractionalOffset.center,
                                    end: FractionalOffset.bottomCenter,
                                    colors: [
                                      const Color(0XFF000000).withOpacity(.0),
                                      const Color(0XFF000000).withOpacity(0.8),
                                    ],
                                  )
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    "Jerusalem",
                                    style: TextStyle(
                                        fontFamily: 'AirbnbCerealBold',
                                        fontSize: 28,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.white),
                                  ),
                                  Text(
                                    "1,243 Place",
                                    style: TextStyle(
                                        fontFamily: 'AirbnbCerealBook',
                                        fontSize: 14,
                                        color: Colors.white),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),

最佳答案

你试过吗

mainAxisAlignment: MainAxisAlignment.end,

与专栏

child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,

有效。

关于flutter - 如何在 flutter 中对齐定位小部件内的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56834706/

相关文章:

flutter - 如何从 Assets 中预加载图像?

Flutter:获取表单中所有值的最佳方式

flutter - 行中可用空间内的中心小部件

input - Flutter - SingleChildScrollView 在键盘弹出时放置在屏幕顶部

android - 从动态创建的列表中动态删除小部件 flutter

gradle - JetifyTransform Flutter 运行执行失败

dart - Flutter listview 底部溢出

dart - Flutter 中的音频播放器插件 - 无法加载 Assets

firebase - 将Firestore数据过滤为仅包含当前用户信息

flutter - Flutter Navigator “argument type '上下文'不能分配给参数类型 'BuildContext'”