Блог

Главная - Вопросы по программированию - как уложить контейнер внутри или чуть ниже другого контейнера во флаттере

как уложить контейнер внутри или чуть ниже другого контейнера во флаттере

#flutter #dart #widget #containers #material-design

Вопрос:

     import 'package:flutter/material.dart';

void main() {
  runApp(MainScreen());
}

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

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Column(
        children: <Widget>[
          Stack(
            children: [
              Container(
                height: 250.0,
                width: width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(150),
                    bottomRight: Radius.circular(150),
                  ),
                  color: Colors.redAccent,
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(
                        "Hello World",
                        style: TextStyle(
                            fontSize: 22,
                            fontFamily: "Arial",
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                      Text(
                        "Hello World",
                        style: TextStyle(
                            fontSize: 22,
                            fontFamily: "Arial",
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          Stack(
            children: [
              Positioned(
                top: 40,
                left: 20,
                child: Container(
                  height: 500,
                  width: 200,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Я попытался добавить новый контейнер на основе той же строки, но не смог найти, как сложить с другим контейнером, использующим виджет позиционирования для второго контейнера, но это не сработало. в конце концов, сделал первый контейнер таким же, как и второй контейнер, используя стек, и позиционированный виджет все еще не сработал

Я попытался добавить новый контейнер на основе той же строки, но не смог найти, как сложить с другим контейнером, использующим виджет позиционирования для второго контейнера, но это не сработало. в конце концов, сделал первый контейнер таким же, как и второй контейнер, используя стек, и позиционированный виджет все еще не сработал

Я загрузил картинку, которая содержит два контейнера вместе, но не стопку только внизу. Спасибо.

Комментарии:

1. Загрузите или укажите изображение виджета цели, которое вы хотите, чтобы мы знали, как вам помочь

Ответ №1:

Если вы хотите поместить два контейнера в стопку, вам не нужно создавать две стопки. Вам просто нужно сложить два контейнера в стопку и завернуть один из них в бумагу. Подобный этому:

     import 'package:flutter/material.dart';

    void main() {
      runApp(MainScreen());
    }

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

    @override
    Widget build(BuildContext context) {
      double width = MediaQuery.of(context).size.width;
      return Scaffold(
        body: Stack(
          children: [
            Container(
              height: 250.0,
              width: width,
              decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(150),
                bottomRight: Radius.circular(150),
              ),
              color: Colors.redAccent,
            ),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                "Hello World",
                style: TextStyle(
                    fontSize: 22,
                    fontFamily: "Arial",
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                "Hello World",
                style: TextStyle(
                    fontSize: 22,
                    fontFamily: "Arial",
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
            ],
          ),
        ),
      ),
      Positioned(
        top: 40,
        left: 20,
        child: Container(
          height: 500,
          width: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.grey,
          ),
        ),
      ),
    ],
  ),
);
}
}
Метки: