Flutter 层叠布局

最新推荐文章于 2024-05-25 08:00:00 发布

兰叶书

最新推荐文章于 2024-05-25 08:00:00 发布

阅读量243

点赞数

分类专栏： # Flutter 实例

本文链接：https://blog.csdn.net/u013227399/article/details/103566152

版权

Flutter 实例专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、StackWidget布局

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override

  Widget build(BuildContext context){
    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.8), //对齐位置，类似position
      children: <Widget>[
        new CircleAvatar(
          backgroundImage: new NetworkImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576492247347&di=a523e85022ec91f8b5c84e75b277600b&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg'),
          radius: 100.0,
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.blue,
          ),
          padding: EdgeInsets.all(5.0),
          child: Text('图片介绍'),
        )
      ],
    );
    return MaterialApp(
      title: 'Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text('垂直方向布局')),
        body: new Center(
          child:stack,

        ),
        
      ),
    );
  }
}

2、PositionedWidget布局

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=1576492247347&di=a523e85022ec91f8b5c84e75b277600b&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg'),
          radius: 100.0,
        ),
        new Positioned(
          bottom:10.0,
          left: 70.0,
          child: new Text(
            '图片介绍',
            style: new TextStyle(
              color: Colors.white,
              backgroundColor: Colors.red,
            ),
          ),
        )
      ],
    );
    return MaterialApp(
      title: 'Demo',
      home: Scaffold(
        appBar: new AppBar(title: new Text('垂直方向布局')),
        body: new Center(
          child:stack,

        ),
        
      ),
    );
  }
}

3、Align布局

import 'dart:io';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterDemo'),
        ),
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 300,
        color: Colors.blue,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topCenter,
              child: Icon(Icons.home,size:60,color:Colors.white),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(Icons.search,size:60,color:Colors.white),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Icon(Icons.send,size:60,color:Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

4、Positioned 布局

import 'dart:io';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterDemo'),
        ),
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 300,
        color: Colors.blue,
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 10,
              child: Icon(Icons.home,size:60,color:Colors.white),
            ),
            Positioned(
              bottom: 0,
              left: 100,
              child: Icon(Icons.search,size:60,color:Colors.white),
            ),
            Positioned(
              right: 0,
              child: Icon(Icons.send,size:60,color:Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}