Stack-Align 和 Stack-Positioned 定位

 

 

 

import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        home: Scaffold(

      appBar: AppBar(title: Text("flutterDemo")),

      body: HomeContent(),

    ));

  }

}

class HomeContent extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Center(

      child: Container(

        height: 400,

        width: 300,

        color: Colors.red,

        child: Stack(

          // alignment: Alignment.center,

          children: [

            Align(

              // alignment: Alignment.topLeft,

              alignment: Alignment(1, -0.2),

              child: Icon(Icons.home, size: 40, color: Colors.white),

            ),

            Align(

              alignment: Alignment.center,

              child: Icon(Icons.search, size: 30, color: Colors.white),

            ),

            Align(

              alignment: Alignment.bottomRight,

              child: Icon(Icons.send, size: 60, color: Colors.orange),

            ),

          ],

        ),

      ),

    );

  }

}

 

--------------

 

import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

        home: Scaffold(

      appBar: AppBar(title: Text("flutterDemo")),

      body: HomeContent(),

    ));

  }

}

class HomeContent extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Center(

      child: Container(

        height: 400,

        width: 300,

        color: Colors.red,

        child: Stack(

          // alignment: Alignment.center,

          children: [

            Positioned(

              left: 10,

              child: Icon(Icons.home, size: 30, color: Colors.white),

            ),

            Positioned(

              bottom: 0,

              child: Icon(Icons.search, size: 30, color: Colors.white),

            ),

            Positioned(

              right: 0,

              child: Icon(Icons.send, size: 30, color: Colors.orange),

            ),

          ],

        ),

      ),

    );

  }

}