Flutter开发 - Widget布局

我们来看一下主要的几种Widget。

Text

Text(
  '这是显示的文本',
  style: TextStyle(
    color: Colors.purple,
    fontSize: 15,
    decoration: TextDecoration.underline
  )

ElevatedButton

ElevatedButton(
  child: Text('按钮'),
  onPressed: () {
    print('点击了按钮');
  },
)

Container

Container(
  color: Colors.black,
  margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
    padding: EdgeInsets.all(5),
    child: Container(
        color: Colors.blue,
        width: 100,
        height: 100)
)

Column和Row

分别类似于垂直和水平的线性布局。

Stack

类似于帧布局。

Align和Center

类似于相对布局中的子控件，Align可以对齐容器的左上右下，Center可以对齐容器的中部。

Scaffold

脚手架，顾名思义，就是帮你把蓝图设计好了，你按它的来就行了。

Scaffold(
  appBar: AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text(widget.title),
  ),
  body: Center(
    // Center is a layout widget. It takes a single child and positions it
    // in the middle of the parent.
    child: Column(
      // Column is also a layout widget. It takes a list of children and
      // arranges them vertically. By default, it sizes itself to fit its
      // children horizontally, and tries to be as tall as its parent.
      //
      // Invoke "debug painting" (press "p" in the console, choose the
      // "Toggle Debug Paint" action from the Flutter Inspector in Android
      // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
      // to see the wireframe for each widget.
      //
      // Column has various properties to control how it sizes itself and
      // how it positions its children. Here we use mainAxisAlignment to
      // center the children vertically; the main axis here is the vertical
      // axis because Columns are vertical (the cross axis would be
      // horizontal).
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Stack()
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: _incrementCounter,
    tooltip: 'Increment',
    child: const Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
)

appBar是应用的标题栏，body是内容视图，floatingActionButton是右下角的悬浮按钮。