美文网首页
flutter Stack与Align、positioned,实

flutter Stack与Align、positioned,实

作者: 浩仔_Boy | 来源:发表于2020-11-16 15:54 被阅读0次
    import 'package:flutter/material.dart';
    
    /*
     * Stack与Align、positioned,实现层叠布局
     */
    void main() {
      runApp(MyApp());
    }
    
    //自定组件就是类
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Stack与Align、positioned,实现层叠布局"),
            ),
            body: HomeContent(),
          ),
          theme: ThemeData(primarySwatch: Colors.red),
        );
      }
    }
    
    //内容区域
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Container(
            width: 300.0,
            height: 180.0,
            color: Colors.yellow,
            child: Stack(
              children: [
                Align(
                  child: Image.network(
                    'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1605512237&di=2e8e1fcd06c9a72ad3c330c463e38d2e&src=http://a0.att.hudong.com/52/62/31300542679117141195629117826.jpg',
                    fit: BoxFit.fill,
                  ),
                ),
                Positioned(
                  bottom: 10,
                  left: 105.0,
                  child: Text(
                    '风景图',
                    style: TextStyle(color: Colors.red, fontSize: 30.0),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter Stack与Align、positioned,实

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