っ碎片化代码Flutter圈子Flutter

Flutter初学之路<2>

2019-04-25  本文已影响0人  白晓明

FlutterDart 语言的移动应用框架,runApp 函数就是Flutter框架的入口。

void main() => runApp(Widget app);

使用runApp函数可以将给定的根组件填满整个屏幕。我们可以通过设定 Widget 来构建我们的UI,我们可以使用布局组件来设定组件的位置,比如希望组件与屏幕的一侧对齐,我们可以使用Align widget

//修改main.dart 文件代码
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World!',
      theme: ThemeData(
        primaryColor: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Fultter'),
        ),
        body: Center(
          child: Container(
            height: 100.0,
            width: 100.0,
            color: Colors.black,
            child: Align(
              alignment: FractionalOffset(0.2, 0.2),
              child: Container(
                height: 40.0,
                width: 40.0,
                color: Colors.amber,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
//我们会看到一个黑色居中的小块中有一个黄色的小块居上居左0.2
上一篇下一篇

猜你喜欢

热点阅读