我试图通过切换按钮实现灵活的行为,我的切换按钮位于一个高度为 60 像素且宽度为无限大的容器内,如何让切换按钮占用所有可用空间?
遗憾的是我不能使用 MediaQuery,因为使用它会以某种方式破坏我的下拉功能,还有其他方法吗?
这是我的切换按钮代码:
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
color: Color.fromRGBO(108, 101, 172, 1),
),
width: double.infinity,
height: 60,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
child: ToggleButtons(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
textStyle: TextStyle(
fontWeight: FontWeight.w700,
fontFamily: 'OpenSans',
color: Colors.black,
fontSize: 17,
),
selectedColor: Colors.black,
fillColor: Colors.white,
children: <Widget>[
Text('My country'),
Text('Global'),
],
onPressed: (int index) {
setState(() {
for (int buttonIndex = 0;
buttonIndex < isSelected.length;
buttonIndex++) {
if (buttonIndex == index) {
isSelected[buttonIndex] = true;
} else {
isSelected[buttonIndex] = false;
}
}
if (index == 1) {
getGlobalResult();
isGlobal = true;
isTotal = true;
} else {
getCountryTotalResult(selectedValue);
isGlobal = false;
isTotal = true;
isDaySelected = [true, false, false];
}
});
},
isSelected: isSelected,
),
),
),
这是我得到的,
最佳答案
要获得全宽 ToggleButtons,您可以使用 LayoutBuilder
。
LayoutBuilder(
builder: (context, constraints) => ToggleButtons(
constraints: BoxConstraints.expand(width: constraints.maxWidth/2),
....
Your CODE
....
)
);
这会将您的 ToggleButtons
动态扩展到全宽。
关于flutter - 如何让切换按钮占据容器中的整个空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61497958/