Flutter布局之Stack重叠控件

作者: TryEnough | 来源:发表于2019-01-07 15:38 被阅读1次

    Flutter教程推荐


    效果图

    TryEnough

    代码

    import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
    import 'package:flutter/material.dart';
    
    void main() {
    //  debugPaintSizeEnabled = true;
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        //关键代码
        var stack = new Stack(
          alignment: const Alignment(0.0, 0.6),  //分析 2
          children: [
            new CircleAvatar(   //分析 3
              backgroundImage: new AssetImage('images/lake.jpg'),
              radius: 100.0,
            ),
            new Container(   //分析 4
              decoration: new BoxDecoration(
                color: Colors.black45,
              ),
              child: new Text(
                '添加水印',
                style: new TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        );
        return Scaffold(
          appBar: AppBar(
          title: Text(widget.title),
          elevation: 5.0,
        ),
          body: Center(  //分析 1
            child: stack,
          ),
        );
      }
    }
    

    分析

      1. 在屏幕中央添加一个stack
      1. Stack中第一个widget为底部的内容,第二个为盖在上面的widget。所以这里的圆形图片CircleAvatar是底部,第二个Container为盖在上面的文字。那么分析2这里的alignment就是调整第二个widget位置的属性。Alignment将第一个widget的中心当作(0,0)坐标。所以这里的(0.0,0.6)就是如图的位置。
      1. CircleAvatar是画圆形图的widget,当使用图时,应该指定backgroundImage属性,同时可以设置半径。
      1. 这个代表盖在底部图片上的文字

    相关文章

      网友评论

        本文标题:Flutter布局之Stack重叠控件

        本文链接:https://www.haomeiwen.com/subject/tyuurqtx.html