Как добавить вид внизу tabcontroller во флаттере
Мне нужно добавить представление в нижней части контроллера вкладок, например:
Например: Представление в действии, которое рисует фрагменты на вкладках. Аналогичный вид в флаттере.
Я пытался добавить контейнер, столбец или строку, но ни один из них не работал. Просто показал пустое место.
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Container(
child: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Text("Project Name"),
bottom: TabBar(tabs: [
Tab(
text: "Status",
),
Tab(
text: "Checking",
)
]),
),
body: new Container(
child: TabBarView(children: [TabDetail1(), TabDetail2()]),
),
)),
));
TabDetails1
class TabDetails1extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return TabDetails1State();
}
}
class TabDetails1State extends State<TabDetails1> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: Text(
"Connected To:",
),
margin: const EdgeInsets.fromLTRB(10.0, 10, 0, 0),
),
new Container(
child: Text(
"Equipment Id :",
),
margin: const EdgeInsets.fromLTRB(10.0, 10, 0, 0),
),
new Container(
width: double.infinity,
color: Colors.amberAccent,
margin: EdgeInsets.only(top: 10),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text("Status"),
margin: EdgeInsets.only(left: 10),
width: 50,
),
new Row(
children: <Widget>[
new Flexible(
child: Container(
width: double.infinity,
child: Text(
"MWM Status",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
padding: EdgeInsets.all(10),
),
flex: 1,
),
new Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
height: 50,
width: 50,
),
flex: 0,
),
new Flexible(
child: Container(
width: double.infinity,
child: Text(
"Not Connected",
maxLines: 1,
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"GPRS Status",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
padding: EdgeInsets.all(10),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
),
flex: 1,
),
Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
width: 50,
height: 50,
),
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text("GPS Connected"),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
),
flex: 1,
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"SIM Status",
style: TextStyle(
color: Colors.white,
),
textAlign: TextAlign.center,
),
margin: EdgeInsets.only(left: 10),
color: Colors.blue,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
),
Flexible(
child: new Container(
margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: new Image.asset(
'assets/images/and.jpg',
width: 50,
height: 50,
),
),
fit: FlexFit.tight,
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text(
"Not Connected",
maxLines: 1,
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"RDMS Status",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
padding: EdgeInsets.all(10),
),
flex: 1,
),
Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
width: 50,
height: 50,
),
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text("Not Connected"),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
),
flex: 1,
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
],
),
)
],
mainAxisSize: MainAxisSize.max,
),
);
}
}
Итак, он содержит TabDetails1, где он отображает этот контейнер.
Не работает показ черного пространства.
—
12.06.2019 14:51
0
2
268
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Я использую "SizedBox" Вы можете увидеть ошибку, как показано ниже:
I/flutter (20325): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (20325): The following assertion was thrown during performResize():
I/flutter (20325): Horizontal viewport was given unbounded width.
Это происходит из кода, как показано ниже:
@override
void performResize() {
assert(() {
if (!constraints.hasBoundedHeight || !constraints.hasBoundedWidth) {
switch (axis) {
case Axis.vertical:
if (!constraints.hasBoundedHeight) {
throw FlutterError(
'Vertical viewport was given unbounded height.\n'
Потому что у TabBarView нет hasBoundedHeight.
Итак, мы должны использовать SizedBox или AspectRatio, которые имеют ограниченную высоту с виджетом. Я установил 500 как высоту SizedBox.
Это полный код, как показано ниже:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: SizedBox(
height: 500,
child: Column(
children: <Widget>[
Expanded(child:TabBarView(
children: [
TabDetail1(),
TabDetail1(),
TabDetail1(),
]
)),
Container(child: Text("hello", style: TextStyle(fontSize: 50.0)))
]
)
),
)
);
}
Widget TabDetail1(){
return new Container(
width: double.infinity,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: Text(
"Connected To:",
),
margin: const EdgeInsets.fromLTRB(10.0, 10, 0, 0),
),
new Container(
child: Text(
"Equipment Id :",
),
margin: const EdgeInsets.fromLTRB(10.0, 10, 0, 0),
),
new Container(
width: double.infinity,
color: Colors.amberAccent,
margin: EdgeInsets.only(top: 10),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text("Status"),
margin: EdgeInsets.only(left: 10),
width: 50,
),
new Row(
children: <Widget>[
new Flexible(
child: Container(
width: double.infinity,
child: Text(
"MWM Status",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
padding: EdgeInsets.all(10),
),
flex: 1,
),
new Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
height: 50,
width: 50,
),
flex: 0,
),
new Flexible(
child: Container(
width: double.infinity,
child: Text(
"Not Connected",
maxLines: 1,
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"GPRS Status",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
padding: EdgeInsets.all(10),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
),
flex: 1,
),
Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
width: 50,
height: 50,
),
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text("GPS Connected"),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
),
flex: 1,
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"SIM Status",
style: TextStyle(
color: Colors.white,
),
textAlign: TextAlign.center,
),
margin: EdgeInsets.only(left: 10),
color: Colors.blue,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
),
Flexible(
child: new Container(
margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
child: new Image.asset(
'assets/images/and.jpg',
width: 50,
height: 50,
),
),
fit: FlexFit.tight,
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text(
"Not Connected",
maxLines: 1,
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
height: 40,
),
flex: 1,
)
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
new Row(
children: <Widget>[
Flexible(
child: Container(
width: double.infinity,
child: Text(
"RDMS Status",
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.blue,
padding: EdgeInsets.all(10),
),
flex: 1,
),
Flexible(
child: new Container(
child: new Image.asset('assets/images/and.jpg'),
width: 50,
height: 50,
),
flex: 0,
),
Flexible(
child: Container(
width: double.infinity,
child: Text("Not Connected"),
margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
color: Colors.white,
padding: EdgeInsets.all(10),
),
flex: 1,
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
],
),
)
],
mainAxisSize: MainAxisSize.max,
),
);
}
}
Это не относится к ответу!
—
12.06.2019 14:23
Не работает, Container(child: Text("hello", style: TextStyle(fontSize: 50.0)) . Как туда попал контейнер?
—
12.06.2019 14:54
@DayaNithi Что содержит TabDetail1?
—
12.06.2019 15:01
Он содержит контейнер с представлениями в нем. например: Дизайн макета.
—
12.06.2019 15:02
Я отредактировал вопрос, пожалуйста, проверьте и обновите.
—
12.06.2019 15:10
@DayaNithi Я только что реализовал ваш код. Я думаю, это работает. Пожалуйста, сравните код со своим.
—
12.06.2019 15:25
Давайте продолжить обсуждение в чате.
—
13.06.2019 05:22
Другие вопросы по теме
Как изменить тип Future<dynamic> на тип bool для общих настроек
Разбор списка во Flutter/Dart
Как предотвратить отклонение флаттера showBottomSheet путем перетаскивания вниз?
Как выделить правильное слово в searchDelegate?
Как создать StaggeredGridView с нижней кнопкой и текстом на изображении
Добавить текст в TextField из внешнего источника
`RouteAware`-исполнитель отписаться от какой-либо предыдущей зависимости?
Построитель списка не может ничего отобразить
Радиус границы не работает виджет контейнера с виджетом вкладки. я хочу, как показано на картинке
Не удается инициализировать переменные перед сборкой?
Похожие вопросы
Я потерял код после закрытия проекта Android Studio, по какой причине?
Как пометить горизонтальный ProgressBar другим цветом в каком-то индексе, как рекламный маркер Youtube желтого цвета в Android
Как создать onClickListener для каждого элемента ListView
Как отфильтровать два списка в Котлине?
Получение com.android.build.api.transform.TransformException: ошибка при создании основного списка dex. при добавлении мест sdk
LaunchFragmentInContainer не может разрешить активность в Android
Как нарисовать фигуру, как на изображении ниже
Как передать данные из recyclerview в новую активность
Как получить родительское значение извлеченных данных Firebase?
Когда я нажимаю на часто задаваемые вопросы или о нас, экран остается на фрагменте настроек
Попробуйте обернуть контейнер для тела в столбец, а затем добавить дополнительную кнопку под ним.