Flutter:Stack组件结合Align/Positioned组件使用,实现对每个子组件分别进行定位

280 阅读1分钟
  • Stack组件结合Align组件使用,实现对每个子组件分别进行定位
    import 'package:flutter/material.dart';
    
    class Home extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("首页"),
            centerTitle: true,
          ),
            body: HomeBody()
        );
      }
    }
    
    class  HomeBody extends StatefulWidget {
      @override
       _HomeBodyState createState() =>  _HomeBodyState();
    }
    
    class  _HomeBodyState extends State <HomeBody> {
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Container(
            width: 400,
            height: 400,
            color: Colors.red,
            child: Stack(
              // fit: StackFit.expand,
              children: [
                Align(
                  alignment: Alignment.topCenter,
                  child: Icon(Icons.home,size: 40,color: Colors.white,)
                ),
                Align(
                  alignment: Alignment(0,0),
                  child: Icon(Icons.home,size: 60,color: Colors.blue,)
                ),
                Align(
                  alignment: Alignment(1,1),
                  child: Icon(Icons.home,size: 50,color: Colors.green,)
                ),
              ],
            ),
          ),
        );
      }
    }
    
  • Stack组件结合Positioned组件使用,实现对每个子组件分别进行定位
    import 'package:flutter/material.dart';
    import 'package:douban_demo/network/http_request.dart';
    class Home extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("首页"),
            centerTitle: true,
          ),
            body: HomeBody()
        );
      }
    }
    
    class  HomeBody extends StatefulWidget {
      @override
       _HomeBodyState createState() =>  _HomeBodyState();
    }
    
    class  _HomeBodyState extends State <HomeBody> {
    
      @override
      void initState() {
        // TODO: implement initState
        print("进入首页init");
        super.initState();
        // HttpRequest.request("https://api.douban.com/v2/user/:name");
      }
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Container(
            width: 400,
            height: 400,
            color: Colors.red,
            child: Stack(
              // fit: StackFit.expand,
              children: [
                Positioned(
                  top: 0,
                  left:10,
                  child: Icon(Icons.home,size: 40,color: Colors.white,)
                ),
                Positioned(
                  bottom: 0,
                  left: 100,
                  child: Icon(Icons.home,size: 60,color: Colors.blue,)
                ),
                Positioned(
                  top: 200,
                  left: 200,
                  child: Icon(Icons.home,size: 50,color: Colors.green,)
                ),
              ],
            ),
          ),
        );
      }
    }