列中的Flutter定位小部件

时间:2019-01-21 12:33:23

标签: dart flutter flutter-layout

enter image description here

我试图通过将“图像”和“文本”包装在“列”小部件中并将其放置在“中心”小部件中,在“列”的中心设置图像,在“文本”的底部设置文本。

不幸的是,它使列居中,并使“图像”位于屏幕中心上方。

我该如何解决?

我当前的代码:

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Theme.of(context).primaryColor),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(ImagePaths.newLogoLogin),
            Text(Strings.beALocal)
          ],
        ),
      ),
    );
  }

2 个答案:

答案 0 :(得分:4)

这可以使用Expanded小部件来实现:

@override
Widget build(BuildContext context) {
  return Container(
    decoration: BoxDecoration(color: Theme.of(context).primaryColor),
    child: Column(
      children: [
        Spacer(),
        Image.asset(ImagePaths.newLogoLogin),
        Expanded(
          Column(
             children: [ Text(Strings.beALocal) ],
             mainAxisAlignment: MainAxisAlignment.start
          )
        )
      ],
    ),
  );
}

答案 1 :(得分:1)

您可以在Stack Positioned小部件中使用Text

完整示例:

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Test")),
        body: Stack(children: [Placeholder(), Test()]),
      ),
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: AlignmentDirectional.bottomCenter,
        overflow: Overflow.visible,
        children: <Widget>[
          Container(
            width: 150,
            height: 150,
            color: Colors.blue,
          ),
          Positioned(child: Text("Some text"), bottom: -25),
        ],
      ),
    );
  }
}

Screenshot