Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/flutter/10.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Flutter 有没有更好的方法来制作这个初始屏幕布局?_Flutter_Dart_Flutter Layout - Fatal编程技术网

Flutter 有没有更好的方法来制作这个初始屏幕布局?

Flutter 有没有更好的方法来制作这个初始屏幕布局?,flutter,dart,flutter-layout,Flutter,Dart,Flutter Layout,我一直在思考如何制作这个简单的布局: 我提出的解决方案如下所示: Positioned( bottom:0, child: Align( alignment: Alignment.center, child:Text("Copyright")) ) 导入“包装:颤振/材料.省道”; 类SplashScreen扩展了无状态小部件{ @凌驾 小部件构建(构建上下文){ 返回脚手架( 主体:堆栈( fit:

我一直在思考如何制作这个简单的布局:

我提出的解决方案如下所示:

Positioned( bottom:0,
            child: Align( alignment: Alignment.center, 
                       child:Text("Copyright"))
)
导入“包装:颤振/材料.省道”;
类SplashScreen扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回脚手架(
主体:堆栈(
fit:StackFit.expand,
儿童:[
纵队(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
容器(
颜色:颜色,红色,
填充:常数边集全部(8.0),
身高:75,
宽度:75,
),
填充物(
填充:常数边集全部(8.0),
子项:文本('App name'),
),
],
),
对齐(
对齐:对齐.bottomCenter,
孩子:填充(
填充:常数边集全部(8.0),
子:文本(“版权”),
),
),
],
),
);
}
}
但我不确定是否有更优雅的方式将“徽标图像”(红色容器)居中,在其下方显示“应用程序名称文本”,同时在屏幕底部显示“版权文本”

我尝试使用Column小部件构建布局,但Align小部件没有对“版权文本”的位置进行任何更改:

导入“包装:颤振/材料.省道”;
类SplashScreen扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回脚手架(
正文:SizedBox.expand(
子:列(
mainAxisAlignment:mainAxisAlignment.center,
儿童:[
容器(
颜色:颜色,红色,
填充:常数边集全部(8.0),
身高:75,
宽度:75,
),
填充物(
填充:常数边集全部(8.0),
子项:文本('App name'),
),
对齐(
对齐:对齐.bottomCenter,
孩子:填充(
填充:常数边集全部(8.0),
子:文本(“版权”),
),
),
],
),
),
);
}
}
这给了我下一个结果:


所以。。。有没有更好的方法来制作这个初始屏幕布局?当您想将元素同时放置在屏幕的中央和底部时,可能有一个小部件是合适的。

使用列外部但堆栈内部的定位布局,如下所示:

Positioned( bottom:0,
            child: Align( alignment: Alignment.center, 
                       child:Text("Copyright"))
)

如果您只想使用不带堆栈的列,可以将两个容器放在列中,并将它们包装在扩展的小部件中,如下面的代码所示:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Container(),
          ),
          Container(
            color: Colors.red,
            padding: const EdgeInsets.all(8.0),
            height: 75,
            width: 75,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('App name'),
          ),
          Expanded(
            child: Container(),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('Copyright'),
          ),
        ],
      ),
    );

哦,这是个好主意,我认为使用
Spacer()
而不是扩展的小部件更简单。没错,但当我使用
Spacer()
时,所有对象都对齐到屏幕左侧