flutter 我希望文本和图标一起在一个小部件下的一行主体

uxhixvfz  于 2023-02-13  发布在  Flutter
关注(0)|答案(3)|浏览(197)

我希望文本和图标一起在一个小部件下的一行中。我尝试了,但得到了以下错误
位置参数太多,应为0,但收到1
有谁能帮我一下吗?先谢了!

void main() => runApp(const Myapp());

class Myapp extends StatefulWidget {
  const myapp({Key? key}) : super(key: key);
  _MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.only(top: 30),

          child: Stack(
            alignment: AlignmentDirectional.center,

            children: <Widget>[
              /** Positioned WIdget **/

              Positioned(
                top: 0.0,
                child: Image.asset(
                  'images/logo.png',
                  height: 150,
                  width: 150,
                ),
              ),
              //Positioned

              /** Positioned WIdget **/

              //Positioned
            ], //<Widget>[]
          ), //Stack
        ),

        Text.rich(
  TextSpan(
    children: [
      TextSpan(text: 'Click'),
      WidgetSpan(child: Icon(Icons.add)),
      TextSpan(text: 'to add'),
    ],
  ),
)
        
      ),
    );
  }
}
czq61nw1

czq61nw11#

首先,错误“太多位置参数,期望0,但接收到1”是由于RichText的位置在Stack Widget子控件之外(方括号[])。
若要获得问题中提到的所需输出,请使用代码注解中指定的行以及附加的代码。

void main() => runApp(const Myapp());

class Myapp extends StatefulWidget {
  const Myapp({Key? key}) : super(key: key);
  @override
  _MyappState createState() => _MyappState();
}

class _MyappState extends State<Myapp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.only(top: 30),

          child: Stack(
            alignment: AlignmentDirectional.center,

            children: const <Widget>[
              /** Positioned WIdget **/
              // Positioned(
              //   top: 0.0,
              //   child: Image.asset(
              //     'images/logo.png',
              //     height: 150,
              //     width: 150,
              //   ),
              // ),

              /** Positioned WIdget **/
              
              /// This is where the RichTextWidget should be
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(text: 'Click'),
                    WidgetSpan(child: Icon(Icons.add)),
                    TextSpan(text: 'to add'),
                  ],
                ),
              ),
              /// Additionally, use a Row([Text,Icon,Text]) and use
              /// crossAxisAlignment Property to align the children
            ], //<Widget>[]
          ), //Stack
        ),
        /// You placed the below RickText outside the Stack, it should be above in the Widget[] of the stack.
        //  Text.rich(
        //   TextSpan(
        //     children: [
        //       TextSpan(text: 'Click'),
        //       WidgetSpan(child: Icon(Icons.add)),
        //       TextSpan(text: 'to add'),
        //       ],
        //     ),
        //   )
      ),
    );
  }
}
s8vozzvw

s8vozzvw2#

如果你想放置一个带有titleicon的按钮,那么你可以使用TextButton.icon,而不是把它放在一行中或者放在RichText中。
下面是按钮示例:

class DemoWidget extends StatelessWidget {
  const DemoWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton.icon(
          onPressed: () {},
          icon: const Icon(Icons.mail),
          label: const Text("Title"),
        ),
      ),
    );
  }
}

然后你可以把它放到一个堆栈中,并在其中分配一个背景图像。你可以使用Positioned.fill,然后尝试修改参数,直到它符合你的要求。

ars1skjm

ars1skjm3#

caffold(
      body: Center(
        child: Container(color: Colors.lightGreen,
          height: 200,
          width: 200,
          child: Stack(
            alignment: AlignmentDirectional.center,
            children:  <Widget>[
              Positioned(child: Image.asset("assets/test.png")),
              const Text.rich(
                TextSpan(
                  children: [
                    TextSpan(text: 'Click'),
                    WidgetSpan(child: Icon(Icons.add)),
                    TextSpan(text: 'to add'),
                  ],
                ),
              ),
            ], //<Widget>[]
          ),
        ),
      ),
    )

相关问题