[flutter] Flutter에서 RaisedButton의 너비를 설정하는 방법은 무엇입니까?

Program / 글쓴이

RaisedButtonFlutter에서 a의 너비를 설정할 수 없음을 보았습니다 . 내가 잘 이해 한 경우, 나는을 넣어해야 RaisedButton에 SizedBox. 그런 다음 상자의 너비 또는 높이를 설정할 수 있습니다. 맞습니까? 다른 방법이 있습니까?

이것은 SizedBox모든 버튼 주위 에 생성하는 것이 약간 지루 하므로 왜 이런 식으로 선택했는지 궁금합니다. 나는 그들이 그렇게 할 타당한 이유가 있다고 확신하지만 나는 그것을 보지 못합니다. 스캐 폴딩은 초보자를 위해 읽고 만들기가 매우 어렵습니다.

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: new RaisedButton(
    child: new Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

답변

여기 문서 에서 말했듯이

돌출 된 버튼의 최소 크기는 88.0 x 36.0이며 ButtonTheme로 덮어 쓸 수 있습니다.

그렇게 할 수 있습니다

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

답변

들어 match_parent당신이 사용할 수있는

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

특정 값에 대해 사용할 수 있습니다.

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

답변

플러터는 크기에 관한 것이 아니기 때문입니다. 제약에 관한 것입니다.

일반적으로 두 가지 사용 사례가 있습니다.

  • 위젯의 자식은 제약 조건을 정의합니다. 상위 크기 자체는 해당 정보를 기반으로합니다. ex : Padding, 자식 제약 조건을 취하고 증가시킵니다.
  • 부모는 자식에게 제약을 적용합니다. 예 : SizedBox,하지만 Columnstrech 모드에서도 …

RaisedButton첫 번째 경우입니다. 즉, 자체 높이 / 너비를 정의하는 버튼입니다. 그리고 재료 규칙에 따라 올린 버튼 크기가 고정됩니다.

이러한 동작을 원하지 않으므로 두 번째 유형의 위젯을 사용하여 버튼 제약 조건을 재정의 할 수 있습니다.

어쨌든 이것이 많이 필요하다면 당신을 위해 일하는 새로운 위젯을 만드는 것을 고려하십시오. 또는 MaterialButton높이 속성이있는를 사용하십시오 .

답변

다음과 같이 할 수있는 것보다 MaterialButton을 사용하는 것이 좋습니다.

new MaterialButton(
 height: 40.0,
 minWidth: 70.0,
 color: Theme.of(context).primaryColor,
 textColor: Colors.white,
 child: new Text("push"),
 onPressed: () => {},
 splashColor: Colors.redAccent,
)

답변

확장 된 위젯을 사용해야합니다. 그러나 버튼이 열에있는 경우 확장 된 위젯이 나머지 열을 채 웁니다. 따라서 확장 된 위젯을 한 행으로 묶어야합니다.

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

답변

Raise 버튼을 부모와 일치시키는 가장 선호하는 방법은 컨테이너로 감싸는 것입니다. 아래는 샘플 코드입니다.

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )

답변

이 코드는 RaisedButton에 너비를 직접 지정할 수없고 자식에 너비를 지정할 수 있으므로 문제를 더 잘 해결하는 데 도움이됩니다.

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );