Flutter之stack flex postion的使用

艾米家的猫儿（傻钢）

已于 2023-02-03 16:32:08 修改

阅读量132

点赞数

分类专栏： flutter 文章标签： flutter

于 2023-02-03 16:30:23 首次发布

本文链接：https://blog.csdn.net/qq_731335498/article/details/128870584

版权

flutter 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

1.他们的使用类似css；
2.在 postions 想用用row 需要给 positon 配置宽度高度；
3.在 postions 中的不可以使用 double.infinity；只能用 MediaQuery.of(context).size.width

width: MediaQuery.of(context).size.width,

height: MediaQuery.of(context).size.height - 100

import 'package:flutter/material.dart';

void main() {
  runApp(const MyNewApp());
}

class MyNewApp extends StatelessWidget {
  const MyNewApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.pink),
      home: Scaffold(
        appBar: AppBar(title: const Text('我是 title')),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 0,
          left: 0,
          width: MediaQuery.of(context).size.width,
          child: Container(
            padding: const EdgeInsets.only(top: 50),
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height - 100,
            color: Colors.green[200],
            child: ListView.builder(
              itemCount: 30,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Container(
                    alignment: Alignment.center,
                    height: 50,
                    decoration:
                        BoxDecoration(border: Border.all(color: Colors.pink)),
                    child: Text('我是列表$index'),
                  ),
                );
              },
            ),
          ),
        ),
        Positioned(
          top: 0,
          left: 0,
          width: MediaQuery.of(context).size.width,
          child: Container(
            alignment: Alignment.center,
            width: double.infinity,
            height: 50,
            decoration: const BoxDecoration(
              color: Colors.pink,
            ),
            child: const Text(
              '我是搜索定位输入框',
              style: TextStyle(
                color: Colors.white,
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        )
      ],
    );
  }
}