颤振中的并排组件答案

【问题标题】：Side by side components in flutter颤振中的并排组件
【发布时间】：2021-03-20 00:19:33
【问题描述】：

我试图通过使用行和列在容器中并排制作图标和文本，但我无法获得我想要的结果。在第一张图片这是我的代码，在第二张图片这是我想要实现的。任何帮助都是应用程序。另外，如何实现具有不同颜色的分隔线？干杯

【问题讨论】：

【解决方案1】：

您在ReusableCard 中使用TextField 对吗？当然，您可以使用 Row 来实现，但在这种情况下，这通常是使用 suffixIcon 属性完成的：

TextField(
          decoration: InputDecoration(
            suffixIcon: Icon(Icons.search),
          ),

或者您可以将必须连续排列的子小部件包装在一个 Row 小部件中。这是一个例子：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  TextStyle _style = TextStyle(color: Colors.yellow[800], fontSize: 30);
  Color _color = Colors.yellow[800];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
          backgroundColor: Colors.blue[800],
          appBar: AppBar(
            title: Text('Material App Bar'),
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                children: [
                  Icon(Icons.done, color: _color),
                  SizedBox(width: 15),
                  Text('Electricity', style: _style),
                  Spacer(),
                  Icon(Icons.done, color: _color),
                  SizedBox(width: 15)
                ],
              ),
              Divider(color: _color),
              Row(
                children: [
                  Icon(Icons.done, color: _color),
                  SizedBox(width: 15),
                  Text('Internet', style: _style),
                  Spacer(),
                  Icon(Icons.done, color: _color),
                  SizedBox(width: 15)
                ],
              ),
              Divider(),
            ],
          )),
    );
  }
}

【讨论】：

不，我实际上是在使用文本和图标。这是我的代码：` Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( icon, size: 80, ), SizedBox( height: 15, ), Text( label, style: labelTextStyle, ), ], ); }`
@Reagan，更新的答案，我不知道你的小部件树的确切代码，所以这只是一个示例。
我使用了你的技术，它奏效了，我只是更改了mainAxisAlignment 开始。

【解决方案2】：

如果不使用Stack，图标的间距/对齐会很棘手，但可以通过大量摆弄填充/边距来完成。

import 'package:flutter/material.dart';


final bool debug = false;

class RowColLayoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Row Col Layout'),
      ),
      body: Column(
        children: [
          Container(
            color: debug ? Colors.lightGreenAccent : null,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Flexible(
                    flex: 1,
                    child: RowIcon(icon: Icons.lightbulb)
                ),
                Expanded(
                  flex: 2,
                  child: RowText(text: 'Electricity')
                )
              ],
            ),
          ),
          RowDivider(),
          Container(
            color: debug ? Colors.lightGreenAccent : null,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Flexible(
                    flex: 1,
                    child: RowIcon(icon: Icons.microwave_rounded,)
                ),
                Expanded(
                    flex: 2,
                    child: RowText(text: 'Internet')
                )
              ],
            ),
          ),
          RowDivider(),
        ],
      ),
    );
  }
}

class RowIcon extends StatelessWidget {
  final IconData icon;

  RowIcon({this.icon});

  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.centerLeft,
        padding: EdgeInsets.only(left: 2),
        decoration: BoxDecoration(
            border: debug ? Border.all() : null
        ),
        child: Icon(icon, size: 80,)
    );
  }
}

class RowText extends StatelessWidget {
  final String text;

  RowText({this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
            border: debug ? Border.all() : null
        ),
        child: Text(text, style: TextStyle(fontSize: 40))
    );
  }
}

class RowDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Divider(thickness: 1, color: Colors.blue, indent: 15, endIndent: 15,);
  }
}

【讨论】：