Как наложить текст поверх виджетов столбцов при флаттере? - PullRequest
Новая
       2

Как наложить текст поверх виджетов столбцов при флаттере?

2 голосов
/ 05 мая 2020

изменить: enter image description here Я сделал «Я ЕСМЬ» ярко-неоново-зеленым, но его смешивание с цветами кнопок стало темно-зеленым.

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

Widget build(BuildContext context) {
return Scaffold(
  body: Align(
    alignment: Alignment.center,
    child: Column(
      children: <Widget>[
        Container(
          height: (MediaQuery.of(context).size.height) / 2,
          width: MediaQuery.of(context).size.width,
          child: RaisedButton(
            color: Colors.black87,
            child: poorText,
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => SecondRoute()),
              );
            },
          ),
        ),
        Container(
          height: (MediaQuery.of(context).size.height) / 2,
          width: MediaQuery.of(context).size.width,
          child: RaisedButton(
            color: Colors.black87,
            child: richText,
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ThirdRoute()),
              );
            },
          ),
        ),
      ],
    ),
  ),
);}

Я пытался использовать стек, но он говорит, что используется слишком много позиционных аргументов. Как мне сохранить макет столбцов и слой текста поверх кнопок? Если есть другой способ без столбца, который все еще позволяет заставить кнопки работать, это тоже нормально. Спасибо!

Ответы [ 2 ]

1 голос
/ 05 мая 2020

Для этого можно использовать виджет Stack:

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

Проверьте код ниже: Он отлично работает: 

Widget build(BuildContext context) {
  return Scaffold(
    // use a stack widget
    body: Stack(
      children: [
        // text to display over buttons
        Align(
          // set alignment to center to place it over the buttons
          alignment: Alignment.center,
          child: Text(
            'Text you want to display over the buttons',
            // give it your style
            style: TextStyle(

            ),
          ),
        ),
        Align(
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Container(
                height: (MediaQuery.of(context).size.height) / 2,
                width: MediaQuery.of(context).size.width,
                child: RaisedButton(
                  color: Colors.black87,
                  child: poorText,
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => SecondRoute()),
                    );
                  },
                ),
              ),
              Container(
                height: (MediaQuery.of(context).size.height) / 2,
                width: MediaQuery.of(context).size.width,
                child: RaisedButton(
                  color: Colors.black87,
                  child: richText,
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => ThirdRoute()),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );}

Надеюсь, это поможет.

0 голосов
/ 05 мая 2020

Используйте виджет 2 Columns в виджете Stack. Приведенный ниже код дает именно то, что вы хотите, если я хорошо вас понял. 

Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Column(
          children: <Widget>[
            Container(
              height: (MediaQuery.of(context).size.height) / 2,
              width: MediaQuery.of(context).size.width,
              child: RaisedButton(
                color: Colors.blue,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondRoute()),
                  );
                },
              ),
            ),
            Container(
              height: (MediaQuery.of(context).size.height) / 2,
              width: MediaQuery.of(context).size.width,
              child: RaisedButton(
                color: Colors.red,
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => ThirdRoute()),
                  );
                },
              ),
            ),
          ],
        ),
        Column(
          children: <Widget>[
            Container(
              // set alignment to center to place it over the buttons
              height: (MediaQuery.of(context).size.height) / 2,
              width: MediaQuery.of(context).size.width,

              child: Center(child: Text('Text 1')),
            ),
            Container(
              // set alignment to center to place it over the buttons
              height: (MediaQuery.of(context).size.height) / 2,
              width: MediaQuery.of(context).size.width,

              child: Center(child: Text('Text 2')),
            ),
          ],
        )
      ],
    );
  }
...