Ширина кнопки відповідності батькові


120

Я хочу знати, що як я можу встановити ширину, щоб відповідати ширині макета батьків

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
        "Submit",
        style: new TextStyle(
          color: Colors.white,
        )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

Я знаю про небагато на Expandedвіджеті, але Expandedрозширює погляд в обидва боки, я не знаю, як це зробити.


1
Можливо, натомість стовпчик?
Гюнтер Зехбауер

Так, я додаю стовпчик замість контейнера, але ширина кнопки - Wrap Content, як можна розтягнути ширину до батьків
Mohit Suthar

Ви можете просто скористатися FlatButton і загорнути його всередину контейнера і додати ширину контейнера до ширини екрана, використовуючи медіа-запит, шукайте мою відповідь нижче
maheshmnj

Відповіді:


264

Правильним рішенням буде використання SizedBox.expandвіджета, який примушує його childвідповідати розміру свого батька.

SizedBox.expand(
  child: RaisedButton(...),
)

Є багато альтернатив, що дозволяє здійснити більш-менш налаштування:

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

або за допомогою a ConstrainedBox

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)

31
SizedBox.expand змусить кнопку зайняти повну ширину та висоту, про це не йдеться. Питання стосується кнопки, що охоплює повну ширину, а не висоту.
Вінот Кумар

3
@ RémiRousselet Коментар Vinoth є дійсним. Оскільки це тепер прийнята відповідь, чи можете ви додати правильні конструктори для SizedBox, щоб спеціально розширити лише ширину?
користувач823447

Я отримую цю помилкуFailed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.
kapsid

Думає про рішення
Аджай Кумар

Я люблю обидва варіанти відповіді, вона більш повна.
Raiden Core

31

Атрибут розміру можна надати за ButtonThemeдопомогоюminWidth: double.infinity

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

або після приземлення https://github.com/flutter/flutter/pull/19416

MaterialButton(
  onPressed: () {},
  child: SizedBox.expand(
    width: double.infinity, 
    child: Text('Raised Button'),
  ),
),


24

Найпростіший спосіб полягає у використанні FlatButtonзагорнутого всередині Container, Кнопка за замовчуванням приймає розмір свого батьківського і так призначає потрібну ширину Container.

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

Вихід:

введіть тут опис зображення


17

Після деяких досліджень я знайшов якесь рішення, і завдяки @ Günter Zöchbauer,

Я використовував стовпчик замість контейнера та

встановіть властивість у стовпчик CrossAxisAlignment.stretch до батьків заповнення відповідності кнопки

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),

8
Column/ Rowне слід використовувати для макета для однієї дитини. Використовуйте натомість альтернативу для однієї дитини. Такі , як Align, SizedBoxі тому подібні.
Ремі Русселет

5

Ви можете встановити збіг батьківського віджета за допомогою

1) встановити ширину в double.infinity :

new Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

2) Використовуйте MediaQuery:

new Container(
          width: MedialQuery.of(context).size.width,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

4

@Mohit Suthar,

Знайдено одне з найкращих рішень для матчу з шириною та висотою, як показано нижче

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ), 

Тут ви можете перевірити , що Expandedконтролер набувають всю залишаються ширина і висота .


1
Поки що його найкраще рішення
M David,

4

Це працювало для мене.

Найпростіший спосіб вказати ширину або висоту збігу у вказаному коді вище.

...
width: double.infinity,
height: double.infinity,
...

4

Для match_parentможна використовувати

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

Для будь-якого конкретного значення, яке ви можете використовувати

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

1

Наступний код працює для мене

       ButtonTheme(
            minWidth: double.infinity,
            child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))

1

Це працює для мене у самостійному віджеті.

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.

1

Це працює для мене.

    SizedBox(
             width: double.maxFinite,
             child: RaisedButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 child: new Text("Button 2"),
                 color: Colors.lightBlueAccent,
                 onPressed: () => debugPrint("Button 2"),
              ),
     ), 

1

Використання a ListTileтакож працює, оскільки список заповнює всю ширину:

ListTile(
  title: new RaisedButton(...),
),




0

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) Це працює для мене.


0

Найбільш базовим підходом є використання Container шляхом визначення його ширини до нескінченності. Дивіться нижче приклад коду

Container(
    width: double.infinity,
    child:FlatButton(
        onPressed: () {
            //your action here
        },
        child: Text("Button"),

    )
)

0
         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(Log in,
                  textAlign: TextAlign.center,
                ),
              ),
            )

Щось подібне працює для мене.


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.