Flutter : 맞춤형 애니메이션 드롭 다운 메뉴를 만드는 방법은 무엇입니까?
파비오 수아레스
Flutter에서 사용자 지정 드롭 다운 메뉴를 만들려고합니다.이 메뉴는 탭시 스크롤 가능한 제품 행을 표시하는 간단한 버튼입니다. 내가 말하는 것을 더 잘 보여주는 이미지를 첨부했습니다. IconButton과 AnimatedContainer를 사용하려고했지만 작동하지 않는 것 같습니다. 나는 누군가가 이와 같은 일을하는 방법에 대해 더 나은 아이디어를 가지기를 바랬습니다.
지금까지 내 코드는 다음과 같습니다.
class ModelsDropdown extends StatefulWidget {
final List<Phone> phones;
ModelsDropdown({@required this.phones});
@override
_ModelsDropdownState createState() => _ModelsDropdownState();
}
class _ModelsDropdownState extends State<ModelsDropdown> {
bool _droppedDown;
@override
void initState() {
_droppedDown = false;
super.initState();
}
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: Duration(milliseconds: 300),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
border: Border.all(width: 2.0)
),
width: 32.0,
height: 32.0,
child: Column(
children: [
IconButton(
padding: const EdgeInsets.only(right: 0.0),
icon: Icon(
_droppedDown ? Icons.expand_more : Icons.expand_less
),
color: Colors.black,
onPressed: () {
setState(() {
_droppedDown = !_droppedDown;
});
}
),
_droppedDown ?
Container(
width: MediaQuery.of(context).size.width,
height: 300.0,
color: Colors.orangeAccent,
) :
SizedBox.shrink()
],
),
);
}
}
용기가 바닥에 있으면 작동하지 않습니다. 오버플로 오류가 발생합니다. 어떤 도움이라도 대단히 감사합니다. 모두 감사합니다.
모핸 데스 R
AnimatedCrossFade로 아래 컨테이너를 변경해야한다고 생각합니다. 애니메이션 크로스 페이드에는 첫 번째와 두 번째 자식이 있습니다 ... https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html
자녀의 키를 설정하지 마십시오 ... 완벽하게 작동합니다 ...
AnimatedCrossFade(
duration: const Duration(seconds: 3),
firstChild: Container(), // When you don't want to show menu..
secondChild: menu,
crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)
이 방법을 사용하면 상단에 Animated Container가 필요하지 않습니다 ... 제거합니다. (return Column) ... with Animated cross Fade를 사용하면 위젯의 높이를 알 필요가 없습니다.
-------------- 코드를 사용하고 고정 높이를 사용하려는 경우 ----------------
width: _droppedDown ? YourWidth : 32.0,
height: _droppedDown ? 300 : 32.0,
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
스크롤 가능한 애니메이션 드롭 다운 메뉴를 만드는 방법은 무엇입니까?
- 2
Opencart 드롭 다운 메뉴를 애니메이션하는 방법
- 3
탐색 모음의 아이콘에서 드롭 다운 메뉴를 만드는 방법은 무엇입니까?
- 4
Plotly : 드롭 다운 메뉴를 구성하는 방법은 무엇입니까?
- 5
드롭 다운 메뉴를 추가하는 방법은 무엇입니까?
- 6
phonegap / cordova를 사용하여 입력 드롭 다운 메뉴를 만드는 방법은 무엇입니까?
- 7
phonegap / cordova를 사용하여 입력 드롭 다운 메뉴를 만드는 방법은 무엇입니까?
- 8
태그 A로 드롭 다운 메뉴를 만드는 방법은 무엇입니까?
- 9
Foundation 6.4.1-부모 아래에 드롭 다운 메뉴 센터를 만드는 방법은 무엇입니까?
- 10
Bootstrap의 항목 메뉴에 하위 메뉴 드롭 다운을 만드는 방법은 무엇입니까?
- 11
맞춤형 컨테이너를 만드는 방법은 무엇입니까?
- 12
드롭 다운 메뉴를 아래쪽에서 슬라이드로 만들고 슬라이드를 부드럽게 만드는 방법은 무엇입니까?
- 13
드롭 다운 메뉴가 열려있는 웹 페이지를 가져 오는 방법은 무엇입니까?
- 14
드롭 다운 메뉴가 열려있는 웹 페이지를 가져 오는 방법은 무엇입니까?
- 15
드롭 다운 메뉴의 너비를 줄이는 방법은 무엇입니까?
- 16
이 간단한 드롭 다운 메뉴를 사용하는 방법은 무엇입니까?
- 17
양식의 처음 두 입력 (아래 참조), 드롭 다운 메뉴에 대한 입력 유형을 만드는 방법은 무엇입니까?
- 18
드롭 다운 메뉴에서 미국을 먼저 만드는 방법은 무엇입니까?
- 19
괜찮은 드롭 다운 메뉴를 만드는 방법?
- 20
JS를 사용하여 반응 형 드롭 다운을 만드는 방법은 무엇입니까?
- 21
jQuery를 사용하여 양식의 드롭 다운 메뉴를 확인하는 방법은 무엇입니까?
- 22
맞춤형 드롭 다운 메뉴 생성
- 23
Plotly : 데이터와 레이아웃이 완전히 다른 그림에 대한 플롯 드롭 다운 메뉴를 만드는 방법은 무엇입니까?
- 24
탐색 메뉴를 검색 창 및 드롭 다운 탭과 정렬하는 방법은 무엇입니까?
- 25
인라인 SwiftUI NavigationBarTitle에 드롭 다운 메뉴를 추가하는 방법은 무엇입니까?
- 26
버튼의 드롭 다운 메뉴를 왼쪽으로 확장하는 방법은 무엇입니까?
- 27
Transfer ant-design에서 드롭 다운 메뉴를 제거하는 방법은 무엇입니까?
- 28
상위 메뉴 옆을 클릭 한 후 드롭 다운 div를 숨기는 방법은 무엇입니까?
- 29
상위 메뉴 옆을 클릭 한 후 드롭 다운 div를 숨기는 방법은 무엇입니까?
몇 마디 만하겠습니다