#flutter #dart #checkbox #right-align
#трепетание #dart #флажок #выравнивание по правому краю
Вопрос:
У меня есть пользовательский виджет флажка, где он возвращает метку и поле флажка,
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(widget.label, style: Theme.of(context).textTheme.headline4),
Checkbox(
activeColor: LightSeaGreen,
checkColor: White,
value: _checkbox,
onChanged: (value) {
setState(() {
_checkbox = !_checkbox;
});
widget.onChanged(value);
},
),
],
),
);
}
Итак, прямо сейчас это выглядит так,
я хочу, чтобы флажки были выровнены по правому краю следующим образом
Я пробовал функцию выравнивания, распорку, MainAxisAlignment.spaceBetween, но ничего не работает
пожалуйста, помогите мне
Ответ №1:
Попробуйте приведенный ниже код, надеюсь, он вам поможет. для этого вы можете использовать Spacer() виджет, и я думаю MainAxisAlignment.spaceBetween , что он тоже работает
Обратитесь к документации по флажкам здесь
Обратитесь к классу Spacer здесь
См. Макеты здесь
Объявить переменную bool:
bool isChecked = false;
Ваш виджет:
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
//mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('widget.label',
style: Theme.of(context).textTheme.headline4),
Spacer(),
Checkbox(
activeColor: Colors.green,
checkColor: Colors.white,
value: isChecked,
onChanged: (bool? value) {
setState(() {
isChecked = value!;
});
},
),
],
),
),
Ваш экран результатов без флажка -> 
Ваш экран результатов с флажком -> 
Ответ №2:
Попробуйте использовать разделитель, чтобы поместить пробел между ними:
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Text(widget.label, style: Theme.of(context).textTheme.headline4),
Spacer(),
Checkbox(
activeColor: LightSeaGreen,
checkColor: White,
value: _checkbox,
onChanged: (value) {
setState(() {
_checkbox = !_checkbox;
});
widget.onChanged(value);
},
),
],
),
);
Ответ №3:
Добавьте эту строку и попробуйте mainAxisSize: MainAxisSize.max
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisSize: MainAxisSize.max
children: [
Text(widget.label, style: Theme.of(context).textTheme.headline4),
Checkbox(
activeColor: LightSeaGreen,
checkColor: White,
value: _checkbox,
onChanged: (value) {
setState(() {
_checkbox = !_checkbox;
});
widget.onChanged(value);
},
),
],
),
);
Комментарии:
1. по-прежнему не выравнивается
Ответ №4:
Попробуйте это
@override
Widget build(BuildContext context) {
return Scaffold(
body:
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(child:Text("Text", style:Theme.of(context).textTheme.headline4)),
Checkbox(
activeColor: Colors.red,
checkColor: Colors.blue,
value: false,
onChanged: (value) {
},
),
],
),
)
);
Комментарии:
1. Я получаю эту ошибку Дочерние элементы RenderFlex имеют ненулевой flex, но входящие ограничения ширины не ограничены.
2. Обновил мой ответ, проверьте сейчас
3. теперь в пользовательском интерфейсе флажок вообще не виден, и он говорит, что он переполнен бесконечными пикселями
4. Замените весь ваш метод сборки этим и проверьте, а не только внутренний код
5. вот как я это сделал. Это ошибка, которую я получаю «Объекту RenderCustomMultiChildLayoutBox был присвоен бесконечный размер во время компоновки».
Ответ №5:
Пожалуйста, обратитесь к приведенному ниже коду
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16.0),
child: CheckboxListTile(
title: const Text(
'label',
style: TextStyle(
color: Colors.black,
),
),
autofocus: false,
activeColor: Colors.blue,
checkColor: Colors.white,
selected: _checkbox,
value: _checkbox,
onChanged: (bool value) {
setState(() {
_checkbox = value;
});
},
),
),
);
}
Ответ №6:
Итак, из того, что я вижу, люди ответили, что вы используете разделитель, который может быть одним из решений. Но, исходя из моих размышлений, я бы посоветовал вам.
- Итак, сначала вы добавляете контейнер в качестве родительского элемента в этот виджет, задаете цвет и проверяете, покрывает ли цвет только дочерний виджет. Это означает, что пробел между параметрами не будет работать, потому что он расширяется максимально, как родительский виджет.
- Поэтому, чтобы использовать максимальную ширину, вы можете использовать MediaQuery или использовать виджет Layoutbuilder, чтобы получить ширину и высоту устройства
Ниже я добавил пример того, как это работает.
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String label = "NVD";
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 40,
),
// this is when the parent has a full width
Container(// consider container as parent
width: MediaQuery.of(context).size.height,
color: Colors.red,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(label, style: Theme.of(context).textTheme.headline4),
Checkbox(
activeColor: Colors.grey,
checkColor: Colors.white,
value: true,
onChanged: (value) {},
),
],
),
Container(
color: Colors.blue,
height: 10,
)
],
),
),
),
SizedBox(
height: 40,
),
// this is when the below container which is parent and has
// specific width due to which child is will adjust accordingly.
Container(
width: 200,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(label, style: Theme.of(context).textTheme.headline4),
Checkbox(
activeColor: Colors.grey,
checkColor: Colors.white,
value: true,
onChanged: (value) {},
),
],
),
Container(
color: Colors.red,
height: 10,
)
],
),
),
),
],
),
);
}
}
Изображение для внедрения кода
Дайте мне знать, если это сработает
Спасибо.