Flutter - FlatButton Заполнить доступное горизонтальное пространство - PullRequest
Новая
       14

Flutter - FlatButton Заполнить доступное горизонтальное пространство

1 голос
/ 26 февраля 2020

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

На веб-сайте, который в настоящее время существует, у нас это работает для одна кнопка против две кнопки , но я не могу заставить одну кнопку горизонтально развернуться, чтобы заполнить доступное пространство.

На данный момент я добавляю FlatButton s к переменной List<Widget>, которую я передаю в качестве дочерних для строки. Я пытался использовать Flex -> Expanded, SizedBox.expand, CrossAxisAlignment.stretch и каждое решение, которое я нашел на этом сайте, чтобы расширить его, но каждое решение, которое я пробовал, все приводило к forced infinite width или unbounded width или non-zero flex but incoming width constraints are unbounded.

Вот мой код в методе build в его нынешнем виде: 

List<Widget> fullTextDownloadBtns = new List();
if (this.fullArticleUrl != null && this.fullArticleUrl.isNotEmpty) {
  fullTextDownloadBtns.add(
    FlatButton(
      color: Color(0x66629c44),
      onPressed: _openFullArticle,
      child: Text(
        "Full Article",
        style: TextStyle(color: Color(0xff629c44)),
      ),
    )
  );
}

if (this.downloadUrl != null && this.downloadUrl.isNotEmpty) {
  fullTextDownloadBtns.add(
    FlatButton(
      color: Color(0x664d69b1),
      onPressed: _download,
      child: Text(
        "Download",
        style: TextStyle(color: Color(0xff4d69b1)),
      ),
    )
  );
}

return Scaffold(
    appBar: AppBar(
      backgroundColor: Color(0xff0096b0)
    ),
    body: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          // ...related image, title

          Container(
            padding: EdgeInsets.all(15.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: fullTextDownloadBtns,
            ),
          ), // Read full article & download PDF

          // ... Authors, excerpt/description, like/share buttons, comments
        ],
      )
    ),
  );

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Оборачивание ваших кнопок с помощью Expanded - это путь к go здесь (я попробовал это с вашим кодом): 

Row(
  children: [
    Expanded(
      child: FlatButton(onPressed: (){},
        child: Text("1")),
    ),
    Expanded(
      child: FlatButton(onPressed: (){},
        child: Text("2")),
    )
  ],
),

Кстати, начиная с SDK 2.2.2 (в вашем pubspe c .yaml), вы можете использовать условия в списке детей: 

children: [
  if(true == true)
  FlatButton(
    onPressed: (){},
    child: Text("1")),
],
0 голосов
/ 27 февраля 2020

Вы можете использовать виджет Row и использовать два виджета Expanded, дочерним элементом которых является FlatButton. Реализуйте условие для их отдельного вида, например: 

Row(
children:[
trueCondition ? Expanded(
child: FlatButton()
) : SizedBox()
]
)
...