Flutter開發（4）stack（層疊佈局）、Positioned（定位佈局）、Card(卡片佈局)

stack（層疊佈局）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var stack = new Stack(
      //alignment 子元素對齊，最少要有2個屬性纔可用
      alignment: const FractionalOffset(0.5,0.999),
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588600592396&di=913dc402953647334a406781af21d172&imgtype=0&src=http%3A%2F%2Fimage4.xyzs.com%2Fupload%2F93%2Fd6%2F1022%2F20150505%2F143079112998431_0.png'),
          radius: 100.0,

        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.lightBlue,
          ),
          padding: EdgeInsets.all(5.0),
          child: Text('   我是老牛   '),
        ),
      ],
    );

    return MaterialApp(
      title: 'laoniu home',
      home: Scaffold(
        appBar: AppBar(
          title: Text('laoniu 層疊佈局'),
        ),
        body: Center(
          child: stack,
        )
      )
    );
  }
}

 

Positioned（定位佈局）

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack(
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage(
              'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588600592396&di=913dc402953647334a406781af21d172&imgtype=0&src=http%3A%2F%2Fimage4.xyzs.com%2Fupload%2F93%2Fd6%2F1022%2F20150505%2F143079112998431_0.png'),
          radius: 100.0,
        ),
        new Positioned(
          top: 10.0,
          left: 60.0,
          child: new Text(
            '我是老牛',
            style: TextStyle(
              color: Colors.redAccent,
            ),
          ),
        ),
        new Positioned(
          bottom: 10.0,
          right: 10.0,
          child: new Text(
            '我是王力宏',
            style: TextStyle(
              color: Colors.redAccent,
            ),
          ),
        ),
      ],
    );

    return MaterialApp(
        title: 'laoniu home',
        home: Scaffold(
            appBar: AppBar(
              title: Text('laoniu 定位佈局'),
            ),
            body: Center(
              child: stack,
            )));
  }
}

 

Card (卡片佈局)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var card = new Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text(
              '武漢市武漢大學',
              style: TextStyle(
                fontWeight: FontWeight.w500,
              ),
            ),
            subtitle: Text('老牛:15888888888'),
            leading: new Icon(Icons.access_alarm),
          ),
          new Divider(),
          ListTile(
            title: Text(
              '北京市清華大學',
              style: TextStyle(
                fontWeight: FontWeight.w500,
              ),
            ),
            subtitle: Text('老牛:15888888888'),
            leading: new Icon(Icons.access_alarm),
          ),
          new Divider(),
          ListTile(
            title: Text(
              '深圳市中山大學',
              style: TextStyle(
                fontWeight: FontWeight.w500,
              ),
            ),
            subtitle: Text('老牛:15888888888'),
            leading: new Icon(Icons.access_alarm),
          ),
          new Divider(),
        ],
      ),
    );

    return MaterialApp(
        title: 'laoniu home',
        home: Scaffold(
            appBar: AppBar(
              title: Text('laoniu card佈局'),
            ),
            body: Center(
              child: card,
            )));
  }
}