dart UI Stack with Flutter

clj7thdc 于 2023-10-13 发布在 Flutter

关注(0)|答案(1)|浏览(131)

目前我正在学习关于flutter堆栈部件，我有一个想法，使这样的

的UI
这是我的代码

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Column(
        children: <Widget>[
          Stack(
           children: [
             Container(
              decoration: BoxDecoration(shape: BoxShape.rectangle,color: Colors.green),
              child:null ,
            ),
            Container(
              decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.white),
              child: null,
            )
           ],
          )
        ],
      ),
    );
  }
}

但显然它不起作用，我不知道为什么你们能帮我？我只是需要的绿色和白色背景使用栈在扑

dart

来源：https://stackoverflow.com/questions/77198993/ui-stack-with-flutter

1条答案

按热度按时间

5kgi1eie1#

试试这个.

class MyScaffold extends StatelessWidget {
  const MyScaffold({
    this.appBar,
    required this.body,
    super.key,
  });

  final Widget? appBar;
  final Widget body;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            width: double.maxFinite,
            height: 150,
            color: Colors.green,
          ),
          Positioned(
            top: -20,
            right: -20,
            child: Container(
              width: 100,
              height: 100,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
              ),
            ),
          ),
          SafeArea(
            child: Column(
              children: <Widget>[
                if (appBar != null) appBar!,
                body,
              ],
            ),
          ),
        ],
      ),
    );
  }
}

样本使用。

class TestPage extends StatelessWidget {
  const TestPage({
    super.key,
  });

  Widget _buildAppBar() => Padding(
        padding: const EdgeInsets.all(20),
        child: Row(
          children: <Widget>[
            const Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('App Bar'),
                  Text('Hello StackOverflow'),
                ],
              ),
            ),
            IconButton(
              onPressed: () {
                //
              },
              icon: const Icon(Icons.notifications_none),
            ),
          ],
        ),
      );

  @override
  Widget build(BuildContext context) {
    return MyScaffold(
      appBar: _buildAppBar(),
      body: const Card(
        margin: EdgeInsets.all(20),
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Row(
            children: <Widget>[
              Text('Saldo'),
            ],
          ),
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-10-13

我来回答

dart UI Stack with Flutter

1条答案

相关问题

热门标签

最新问答