问将按钮和水平线放在文本后面
EN

Stack Overflow用户

提问于 2022-03-10 02:29:16

回答 2查看 518关注 0票数 0

这是我关于颤振的第二篇帖子。我在学颤音。我在UI设计上遇到了一个问题。

我试着在文本后添加按钮，但做不到吗？每当我尝试添加按钮时，我都会得到错误:位置参数必须发生在命名参数之前.或者太多的位置争论..。同样，我无法在文本下面添加水平线。

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget
{
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My First App"),
        backgroundColor: Color(0xffFF9800),
      ),
      body: _bodyWidget(),
    );

  }
}

Widget _bodyWidget()
{
  return Container(
    padding: EdgeInsets.all(20.0),

    child: Row(
      children: [
       Flexible(child: Container(
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10),
           color: Color(0xffF5DAC9),
           boxShadow: [
             BoxShadow(
               color: Colors.black,
               offset: const Offset(
                 5.0,
                 5.0,
               ), //Offset
               blurRadius: 10.0,
               spreadRadius: 2.0,
             ), //BoxShadow
             BoxShadow(
               color: Colors.white,
               offset: const Offset(0.0, 0.0),
               blurRadius: 0.0,
               spreadRadius: 0.0,
             ), //BoxShadow
           ],

         ),
         padding: EdgeInsets.all(20),
         child: new Text
           (
             " Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
              style: new TextStyle(
                fontSize: 30.0,
                fontWeight: FontWeight.w400,
              ),


         ),
       ),

         

       ),

       

      ],
    ),

  );
}

主省道文件代码

import 'package:flutter/material.dart';
import 'HomePage.dart';

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


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Repairing Services",
      theme: new ThemeData(
        primarySwatch: Colors.blue
      ),
      home: new HomePage(),
    );
  }
}

dart

flutter

回答 2

Stack Overflow用户

发布于 2022-03-10 02:39:57

您可以使用Row包装文本和按钮。您可以使用Divider()获得水平线。

尝试如下：

    Widget _bodyWidget()
{
   return 
        padding: const EdgeInsets.all(20.0),
        child: Row(
          children: [
            Flexible(
              child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: const Color(0xffF5DAC9),
                    boxShadow: const [
                      BoxShadow(
                        color: Colors.black,
                        offset: Offset(
                          5.0,
                          5.0,
                        ), //Offset
                        blurRadius: 10.0,
                        spreadRadius: 2.0,
                      ), //BoxShadow
                      BoxShadow(
                        color: Colors.white,
                        offset: Offset(0.0, 0.0),
                        blurRadius: 0.0,
                        spreadRadius: 0.0,
                      ), //BoxShadow
                    ],
                  ),
                  padding: const EdgeInsets.all(20),
                  child: Column(mainAxisSize: MainAxisSize.min, children: [
                    Row(children: [
                      const Expanded(
                          child: Text(
                        " Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
                        style: TextStyle(
                          fontSize: 30.0,
                          fontWeight: FontWeight.w400,
                        ),
                      )),
                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            textStyle: const TextStyle(fontSize: 20)),
                        onPressed: () {},
                        child: const Text('Enabled'),
                      ),
                    ]),
                    const Divider(color: Colors.black),
                  ])),
            ),
          ],
        ),
      );
}

票数 1

Stack Overflow用户

发布于 2022-03-10 02:54:11

您可以在Flexible小部件之后添加按钮，并给SizedBox在文本和按钮之间应用空间。

试试这个：

Widget _bodyWidget() {
  return Container(
    padding: EdgeInsets.all(20.0),
    child: Row(
      children: [
        Flexible(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Color(0xffF5DAC9),
              boxShadow: const [
                BoxShadow(
                  color: Colors.black,
                  offset: Offset(
                    5.0,
                    5.0,
                  ), //Offset
                  blurRadius: 10.0,
                  spreadRadius: 2.0,
                ), //BoxShadow
                BoxShadow(
                  color: Colors.white,
                  offset: Offset(0.0, 0.0),
                  blurRadius: 0.0,
                  spreadRadius: 0.0,
                ), //BoxShadow
              ],
            ),
            padding: EdgeInsets.all(20),
            child: const Text(
              " Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
              style: TextStyle(
                fontSize: 30.0,
                fontWeight: FontWeight.w400,
              ),
            ),
          ),
        ),
        SizedBox(width: 20),
        ElevatedButton(
          onPressed: () {},
          child: Text('Buttom'),
          style: ElevatedButton.styleFrom(
            textStyle: const TextStyle(fontSize: 22),
            padding: EdgeInsets.all(20),
          ),
        ),
      ],
    ),
  );
}